How to bring components of columns vertically aligned - html

Question

I have to vertically align the elements of an unknown number of columns that contains of a headline, a description and a button.
Per default every element takes as much space as it's content uses
but the elements should all be aligned. So all headlines, descriptions and buttons should begin at the same height.
I have the feeling that flexbox might not help here but a CSS grid might or maybe using display: table and turn everything in such structures but sadly I cannot get it to work.
The current markup looks 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>

Answer 1

You can define an implicit CSS grid and then simply use grid-auto-flow: column so that the grid fills itself up column-first (instead of row-first as per default behaviour).
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-auto-flow: column;
Remember that 1fr is greedy while auto is not, so we allow the middle row (where your <p> tags are) to grow as much as possible.
This however requires you to "unpack" your individual <li> content so that all elements in the grid are siblings of each other, due to the lack of support for CSS subgrid in most browsers at the time of writing.
For the button, you can simply use fit-content for both width and height to ensure that it "shrink-wrap" its content, and use margin: 0 auto to center it horizontally inside the grid.
See proof-of-concept below:
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-auto-flow: column;
text-align: center;
}
.grid a {
display: block;
background-color: steelblue;
color: #fff;
border-radius: 100vh;
width: fit-content;
height: fit-content;
margin: 0 auto;
padding: .5em 1em;
text-decoration: none;
}
<div class="grid">
<h3>Some headline</h3>
<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>
Foo
<h3>Another headline</h3>
<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.
</p>
Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar Bar
<h3 class="title">Surprisingly here's a third headline that should be aligned with the other two</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum facilis praesentium quaerat, laboriosam ratione eos.
</p>
Baz
</div>