I have the following flex-design to align 3 cards in a row and at the end inside the individual cards. It needs to align the content if there's not a image present or if the description is longer than the rest, however I cannot get it to work properly with the titles aligning, the paragraph pushes the title up instead of growing down. I can fix it with a fixed height on the p element but I'm wondering if there's a more dynamic way of handling this and not relying on arbitrary fixed heights?
Ideally would be to have the two cards with less content aligning with the 'taller' card, but with the card having no image stay at the same level as the other cards.
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } .container { display: flex; justify-content: space-between; align-items: stretch; gap: 20px; height: 100%; } .card { background-color: #f4f4f9; border: 1px solid #ddd; border-radius: 8px; display: flex; flex-direction: column; width: 30%; } .img { background-color: #ccc; height: 150px; } .content { padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; flex-grow: 1; } h5 { font-size: 18px; margin-bottom: 10px; } p { font-size: 14px; color: #555; }<div class="container"><div class="card"><div class="img"></div><div class="content"><h5>Title 1</h5><p>description</p></div></div><div class="card"><div class="content"><h5>Title 2</h5><p>description</p></div></div><div class="card"><div class="img"></div><div class="content"><h5>Title 3</h5><p>description description description description description description description description description</p></div></div></div>