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

Иногда бывает полезно, чтобы часть текста была выровнена по левому краю, а часть – по правому на одной и той же строке. Например, в нижнем колонтитуле, информация об авторе должна располагаться слева, а информация о дате публикации – справа. Вот так можно представить себе HTML:

<div class="justify-text">
  <p class="left">Текст слева.</p>
  <p class="right">Текст справа.</p>
</div>

Css можно представить так:

.alignleft {
	float: left;
}
.alignright {
	float: right;
}

Не забудьте про clear: both; при работе с флоатами. Но лучше это сделать через флексы.

Результат:

See the Pen
align left-right by vladislav (@vladislavvv)
on CodePen.

Выравниваем через FlexBox

Html и Css структура остается такой-же.

В FlexBox поможет свойство justify-content со значением space-between

.justify-text{
  display: flex;
  justify-content: space-between;
}

Результат работы:

See the Pen
align left-right by vladislav (@vladislavvv)
on CodePen.