Как растянуть контент блока на flexbox?

Question

[MRcracker]

Есть карточки. Подскажите, пожалуйста, как можно сделать так, чтобы в данных карточках заголовки и контент были на одной линии вне зависимости от размера контента; соседняя карточка просто растягивалась в зависимости от размера предыдущей?

Код

P.S. Пожалуйста, объясните как эту задачу можно решить на flexbox и не переписывайте полностью html :)

Answer 1

[Сергей delphinpro]

https://codepen.io/delphinpro/pen/XWpQYZL?editors=1100

Comments

[MRcracker]

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

[Сергей delphinpro]

MRcracker, никак.
Единственный вариант, провернуть этот трюк для заголовков. Снизу сделать фиксированный паддинг и нижнюю часть прицепить абсолютом.

[Сергей delphinpro]

Хотя нет. Тоже не выйдет
Только одна из трех частей должна быть резиновая по высоте. Остальные две фиксированные.
Как вариант ограничивать высоту заголовка, скажем двумя строками и обрезать длинные с многоточием. Но не всегда возможно по требованиям.

[MRcracker]

Сергей delphinpro, спасибо за ответы, а если немного подкорректировать разметку, то как это должно выглядеть, чтобы заголовки растягивались?