Как расположить элементы как на картинке?

Question

[Владислав Андреев]

Требуется получить вот такой результат:


У меня выходит вот так


вот код

.main-info-list-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

<ul className={styles['main-info-list']}>
          <li className={styles['main-info-list-item']}>
            <h3>Контактный телефон:</h3>
            <p>{employee?.phone}</p>
          </li>
          <li className={styles['main-info-list-item']}>
            <h3>Дата рождения:</h3>
            <p>{employee?.birthdate}</p>
          </li>
          <li className={styles['main-info-list-item']}>
            <h3>Дата устройства:</h3>
            <p>{employee?.dateOfEmployment}</p>
          </li>
</ul>

то есть мне как бы нужно, чтобы элементы p начинались ровно друг под другом

Comments

[Антон Антон]

тут нужен не флекс а грид или таблица

[Владислав Андреев]

Антон Антон, понял, ок

[Антон Антон]

Владислав Андреев, например можно у ul указать display: table, у li - table-row у h3 и p - table-cell если саму разметку прям вообще не хочется менять

[Владислав Андреев]

Антон Антон, попробую, спасибо

[Danny Arty]

Антон Антон, можно и на флексах, просто у правого блока указать text-align:left, flex: 0 0 значение_flex_basis

[Антон Антон]

Danny Arty, на флексах нужно прям ширину одного из элементов указать, что с динамическим содержимым в разных строках одного столбца проблематично

[Антон Антон]

Ну либо менять разметку, сделав два флекс элемента-столбца с содержимым. Но тогда нарушится accessibility, сначала будут все заголовки, а потом все значения. + Артефакты при недостатке ширины.

[Ankhena]

Владислав Андреев, уже можно subgrid, если устраивает поддержка.

Если нет, то переделайте разметку с ul на dl и обычным гридом. Всё будет ровно и семантично.

Answer 1

[Виолетта Морозова]

Привет! В целом выглядит как таблица, не находишь?) Чтобы это работало как таблица, но на флексах, нужно подумать о том как сделать ячейки первого столбца одинаковой ширины + justify-content сделать start. Думаю вполне может помочь min-width, ну или ещё что-то

Comments

[Владислав Андреев]

Да, спасибо, я примерно так и сделал)