Как выровнять изогнутые элементы, например, таблицы?

Question

У меня есть два flex-бокса, отображающих информацию, и я хотел бы, чтобы содержимое их строк выстраивалось как таблица.

Каждый из них берет 50% от своего родителя и соответственно изменяет размер.

Проблема в том, что я не могу заставить «Контент» располагаться вертикально, потому что мои заголовки имеют переменный размер.

Вот правильная раскладка, работающая как таблица: Вот что я имею с flex:

Я попытался установить минимальную ширину для своих заголовков, но затем, когда я изменяю размер своего браузера, flexbox с более коротким содержимым сжимается больше, чем другие.

Ищите специально для решения flexbox, поскольку есть некоторые адаптивные настройки, которые ломаются для таблицы.

https://codesandbox.io/s/8k6qyrovjl

Обновление : после помощи @seantunwin похоже, что проблема в части содержимого, представляющей собой очень длинную строку, например. URL (обновленный код). Кажется, что все не синхронизировано

Answer 1

Установите для первого дочернего элемента .row значение 50% его ширины гибкого родителя или любое другое значение, которое вам подходит.

Для учета переноса текста вы также можете установить для второго потомка .row значение 50% или другое приемлемое для вас значение.

В приведенном ниже коде также есть примечание как идея для дальнейшей эстетики.

.row :first-child {
  flex: 0 1 50%;
}

.row :nth-child(2) {
  flex: 0 1 50%;
  /* Align to bottom of cell if you're inclined for long text in adjacent */
  align-self: flex-end;
}

Пример: вилка из примера в OP