Как на флексах прижать первую строку к левому краю, вторую к правому?

Для достижения этого эффекта на флексбоксах вам понадобится использовать несколько CSS свойств и правил.

1. Вам нужно установить контейнеру(flex-контейнеру) следующие свойства:
- display: flex; - чтобы превратить элементы во флекс-контейнер;
- justify-content: space-between; - чтобы элементы распределились равномерно по горизонтали, с выравниванием первой строки к левому краю, а второй - к правому.

Пример:

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

2. Затем вам нужно добавить элементам(flex-элементам) следующие свойства:
- flex-grow: 0; - чтобы элементы не растягивались и занимали доступное пространство равномерно;
- flex-shrink: 0; - чтобы элементы не сжимались, если содержимое слишком широко;
- flex-basis: auto; - чтобы элементы имели свою собственную определенную ширину;
- width: 50%; - чтобы элементы занимали половину от доступной ширины контейнера.

Пример:

   .flex-container .flex-item {
     flex-grow: 0;
     flex-shrink: 0;
     flex-basis: auto;
     width: 50%;
   }

3. Наконец, вы можете добавить дополнительные стили для управления выравниванием текста внутри flex-элементов, такие как text-align, align-items и т.д.

Вот полный пример CSS:

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

.flex-container .flex-item {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  width: 50%;
}

Примените этот CSS для вашего флекс-контейнера и его элементов, и ваши две строки будут выровнены так, как вам нужно.