How to correctly set CSS properties so that the block has a height based on the height of its neighbors?

Question

css

Hello. There is such layout and styles.

How to set styles correctly so that the red headings become the same height and by adding text they would stretch even more?

Answer 1

Krch, the main problem is that the nested block cannot see what is happening outside. This is CSS. Cheap and cheerful - limit the text under the heading to such a level that it nailed to the bottom of the card will not have a big gap with the heading.
The inFureal option only works if you are making up a project of the year 12, where you have not yet heard about adaptive in the outback. Because when transferring “cards”, it suddenly turns out that the headings will be one under one, in isolation from the text below them.
At the same time, there are libraries for calculating such sizes, I quickly picked my story and did not find it, but I don’t use it myself, so look for it yourself. Or write yourself. It's not hard.
But it can also be done on dense grids. True, IMHO, it's easier to tinker with scripts than to reduce this joy on grids.

Answer 2

Use flex . It will automatically stretch everything to the same height. Those.stretch