Как зафиксировать контейнер для строк в одном положении?

Question

[marsel81]

У меня есть контейнер item, в котором на одной строке расположены по порядку название, дата и статус, заданные с помощью

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

Ниже расположено описание. Соответственно, таких контейнеров может располагаться много. Но если статус у них будет разный (в моем случае "In Progress" и "Done" => ширина блока меняется) и отсюда строка даты у каждой колонки едет
Мне нужно сделать так, чтобы дата была фиксированной и ровной, вне зависимости от статуса

https://codepen.io/fiorgf/pen/QWJggzM
Зафиксировать ширину - помогает, но вариант, как мне кажется, костыльный

Comments

[Danny Arty]

задайте flex-basis для блока со статусом

[marsel81]

Danny Arty, да, это помогло

.status {
  display: flex;
  flex-basis: 66px;
}

но почему именно 66px делает ее ровно? на что это влияет?
тут можно экспериментировать, но я бы хотел более динамичное решение, а не зафиксировать базовый размер

[Danny Arty]

marsel81, видимо максимальная ширина блока со статусом 66px. Ну задайте в процентах

[Ankhena]

Есть достойное объяснение зачем это делать флексами?

Есть <table> - чудесно подходит для табличных данных.
Есть display table и grid.

[marsel81]

Ankhena, таковы требования. по сути, это маркап карточки, grid не поддерживается в старых версиях хрома, которые тоже являются требованием

[Ankhena]

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

Но можете считать ширину на js.