Как сверстать такой заголовок?

Question

[Дмитрий Дужинский]

Здравствуйте. Нужно сверстать ряд блоков, в которых базовая линяя контента должна совпадать, не зависимо от размера заголовка ( см изображение ). Пытался сверстать такое с помощью флексов, но при слишком большом количестве текста у блока с меньшим заголовком текст уходил вверх, а у блока с большим заголовком и маленьким текстом текст поджимался вниз. Как такое правильно реализовать?

Comments

[Ankhena]

Ждать subgrid.
Пока его нет, использовать JS.

Либо рушить саму карточку с помощью display: contents и использовать grid.
Не очень вариант.

Answer 1

[karmyskove]

Пример: https://codepen.io/EugeneKarmyshkov/pen/NWjOYrG

В примере много лишних свойств написал, ниже ключевые выделю.

Для карточки:

display: flex;
flex-direction: column;

Заголовок и текст карточки становятся flex элементами, чтобы title имел одинаковую высоту, ему просто можно указать свойство flex: 1 1 auto;
В случае если надо чтобы текст подстраивался, тогда для него указывай это свойство.

Comments

[Дмитрий Дужинский]

У вас текст просто прижимается вниз, но не выравнивается по линии. =( Я так же пытался

[karmyskove]

Дмитрий Дужинский, текст заголовка должен прижаться к линии?

[Ankhena]

karmyskove, смысл вопроса в том, что заголовки должны быть одной высоты, определяемой самым большим заголовком.

чтобы title имел одинаковую высоту, ему просто можно указать свойство flex: 1 1 auto;

Это свойство не сделает заголовки одинаковой высоты. А только заставит растянуться на все свободное пространство.
Точнее сделает, но только при условии, что тексты во второй части будут занимать одинаковое количество строк.