My task is to align vertically the elements within multiple columns that include a headline, a description, and a button. By default, each element expands based on its content size
https://i.stack.imgur.com/RJJP4.png
However, I need all elements to be aligned so that all headlines, descriptions, and buttons start at the same height.
https://i.stack.imgur.com/mZL2Z.png
I suspect that flexbox may not be the solution here, but perhaps using CSS grid or applying display: table and restructuring everything in such a format could work. Unfortunately, I have been unable to make it function as desired.
The current code structure appears like this:
<ul>
<li class="columns large-4 small-12 medium-4 s-pb-30">
<h3>Some headline</h3>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Nostrum facilis praesentium quaerat,
laboriosam ratione eos. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Nostrum facilis
praesentium quaerat, laboriosam ratione eos. Lorem
ipsum dolor sit amet consectetur adipisicing elit.
Nostrum facilis praesentium quaerat, laboriosam
ratione eos.
</p>
<a class="button btn-styled center-block--btn" href="/">Foo</a>
</div>
</li>
<li class="columns large-4 small-12 medium-4 s-pb-30">
<h3>Another headline</h3>
<div>
<p style="height: 360px;">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Nostrum facilis praesentium quaerat,
laboriosam ratione eos. Lorem ipsum dolor sit amet
consectetur adipisicing elit. Nostrum facilis
praesentium quaerat, laboriosam ratione eos.
</p>
<a class="button btn-styled center-block--btn" href="/">Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar
Bar Bar </a>
</div>
</li>
<li class="columns large-4 small-12 medium-4 s-pb-0">
<h3 class="title">Surprisingly here's a third headline that should be aligned with the other two</h3>
<div>
<p style="height: 360px;">
Lorem ipsum dolor sit amet consectetur adipisicing
elit. Nostrum facilis praesentium quaerat,
laboriosam ratione eos.
</p>
<a class="button btn-styled center-block--btn" href="/">Baz</a>
</div>
</li>
</ul>