I saw a similar question here.
But I'm trying to have multiple elements in different columns share the same height and I can't wrap my head around it.
Here's a visual example of what I'm trying to achieve:
Normally I'd use nested article tags in a container, and then have div or heading tags for the child elements. But what I'm trying to achieve is to have EVERY child element in each column be the same height. So, all the "title" divs should be the same height. All the "intro" divs should be the same height. All the "description" divs should be the same height. But I also can't define heights those elements since they need to expand/contract responsively.
I tried this with flexbox and css grid, but I'm only successful when there's a single item in each column. I'm sure I'm approaching this completely wrong.
For reference, on mobile, I'd want the article tags to stack (rather than be side-by-side), and on mobile the heights of those child elements should NOT all be the same.
Here's my HTML. I left off the css since I wasn't sure if I should post the flex or grid (and both were failures anyway).
<div class="container three-column">
<div class="item item-1">
<div class="thumb">Thumb</div>
<div class="title">Title 1 - Lorem ipsum dolor sit amet</div>
<div class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat elit velit, ac viverra arcu feugiat et. In volutpat, diam a vulputate commodo, tortor velit mattis lacus, at rhoncus felis purus mollis lectus. Suspendisse dignissim, mauris nec volutpat placerat, nunc odio sollicitudin</div>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</div>
</div>
<div class="item item-2">
<div class="thumb">Thumb</div>
<div class="title">Title 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit </div>
<div class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat elit velit, ac viverra arcu feugiat et. In volutpat, diam a</div>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat elit velit, ac viverra arcu feugiat et. In volutpat, diam a vulputate commodo, tortor velit mattis</div>
</div>
<div class="item item-3">
<div class="thumb">Thumb</div>
<div class="title">Title 3 - Lorem ipsum dolor sit amet</div>
<div class="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat elit velit, ac viverra arcu feugiat et. In volutpat, diam a vulputate commodo, tortor velit mattis lacus, at rhoncus felis purus mollis lectus. </div>
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</div>
</div>
</div>
Is this at all possible?
