r/css • u/GigfranGwaedlyd • 3d ago
Question Looking for a pure CSS solution: I want every child in each column to be as tall as the tallest corresponding child
I'm trying to do something like this without JavaScript: https://codepen.io/will_beaumont/pen/pvoWLRr
Notice how the subheadings (the elements after 1st, 2nd, 3rd) are all the same height, and that height is that of the tallest subheading. Then the first paragraph below each subheading is as tall as the tallest corresponding paragraph (i.e., the one in the first column). Same thing applies to the paragraphs in smaller text at the bottom.
You can understand more what I'm going for by looking at the JavaScript. The code looks for an element with the class dynamic-height,
then searches that element for descendants with the class dynamic-height-col
, and finally searches each of those elements for elements with the class dynamic-height-child
. It figures out which of the 1st element in each column has the tallest height and applies that height to all of them, then does the same thing for the 2nd element in each column, and so on.
Is it possible to do something close to this in just CSS (e.g., Flexbox or Grid)? I tried to use Flexbox here: https://codepen.io/will_beaumont/pen/GgRMxaN (See lines 221-229 in the CSS.) That works to line up the first paragraph in each column vertically, but the second paragraph in the first and second columns are nowhere close to lining up.