Как правильно сверстать данный блок

Question

Подскажите пожалуйста как правильно сверстать данный title новичку? Думал обернуть каждое слово в отдельный div и через margin прописать, но для адаптива это не лучшее решение думаю

Answer 1

Надо обернуть каждую строчку в отдельный , которые будут внутри флексбокса. Далее нужно просто присвоить нужным div-строчкам нужные свойства justify-content

Answer 2

.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 400px;
  background: rgb(207, 159, 159);
  height: 200px;
  line-height: 2.7em;
}
.header > span:nth-child(1) {
  font-size: 50px;
  text-align: start;
}
.header > span:nth-child(2) {
  font-size: 50px;
  text-align: end;
}
.header > span:nth-child(3) {
  font-size: 30px;
  text-align: end;
}

<div class="header">
  <span>Предрейсовые и</span>
  <span>предсменные</span>
  <span>осмотры.</span>
</div>

БЛОГ НА HUSL

Как правильно сверстать данный блок

Ответы (2 шт):