Card panels not same height and in not in rows

Question

How can I make the panels in rows and the same height? I set a height and the white-space: nowrap but it still won't work. How can I fix this?

https://code.sololearn.com/W7Z3tPVr08HK/?ref=app

Answer 1

The favourites div is nested inside of the helpful div, this is the reason why there is a second row.

A couple of other things I notice the app div does not have a closing tag and the first set of p tags are wrapped around the button element while the second set is not this probably causing some issues also.

Answer 2

ODLNT Thanks, all fixed except the third panel, I'll look into it.

Answer 3

ODLNT Odd. Console logged the height attributes, they're all 320px yet the third is obviously shorter

Answer 4

The cards are only taking as much space as it needs, looking at the third card it has less text than the others hence the shorter card.

One solution is to set the height of the text div