Подскажите пожалуйста, как спозиционировать flex-ячейки таблицы

Question

Пытаюсь воссоздать таблицу как на скриншоте с помощью flex. Если с заголовками перед таблицей всё предельно ясно, то возникли проблемы с переносом ячеек и их позоционированием.

Вопрос такой - каким образом можно добиться подобного расположения элементов таблицы и характерного их переноса?

  .digits__table {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: space-between;
  align-items: baseline;
  width: 1100px;
  margin: 0;
  padding: 0;
  .table__cell {
    position: relative;
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    width: 250px;
    margin-top: 0;
    padding-top: 0;
  }
  .table__heading {
    display: flex;
    position: relative;
    line-height: 1.15;
    font-size: 24px;
    font-weight: 600;
    text-align: start;
    margin-top: 0;
  }
  .table__text {
    display: flex;
    position: relative;
    line-height: 1.2;
    font-size: 18px;
    font-weight: normal;
    column-span: all;
    text-align: start;
    margin-top: 0;
  }

<table class="digits__table">
  <tr class="table__cell">
    <th class="table__heading">86 миллиардов</th>
    <td class="table__text">Число нейронов в мозге человека</td>
  </tr>
  <tr class="table__cell">
    <th class="table__heading">2,1 миллиарда</th>
    <td class="table__text">Число нуждающихся в повышении квалификации</td>
    <td class="table__text">Всемирный Банк, 2017</td>
  </tr>
  <tr class="table__cell">
    <th class="table__heading">1000 террабайт</th>
    <td class="table__text">Объём памяти человека</td>
  </tr>
  <tr class="table__cell">
    <th class="table__heading">500 триллионов</th>
    <td class="table__text">Число ответственных за обучение нервных синапсов у взрослого человека</td>
  </tr>
  <tr class="table__cell">
    <th class="table__heading">420 миллионов</th>
    <td class="table__text">Число взрослых людей моложе 25 лет, не имеющих образования для трудоустройства</td>
    <td class="table__text">Всемирный Банк, 2017</td>
  </tr>
  <tr class="table__cell">
    <th class="table__heading">17-20 дет</th>
    <td class="table__text">Пик обучаемости</td>
  </tr>
  <tr class="table__cell">
    <th class="table__heading">1885 год</th>
    <td class="table__text">Открытие кривой забывания</td>
  </tr>
  <tr class="table__cell">
    <th class="table__heading">1889 год</th>
    <td class="table__text">Открытие условного рефлекса</td>
  </tr>
</table>

БЛОГ НА HUSL

Подскажите пожалуйста, как спозиционировать flex-ячейки таблицы

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