JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column-main">
    <article class="column-page-column">
        <h3 class="entry-title">Title 1</h3>
        <p>Blah blah blah</p>
        <a class="button" href="#">Read more</a>
    </article>
    <article class="column-page-column">
        <h3 class="entry-title">Title 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eleifend rhoncus malesuada. Donec a risus nec nunc dignissim egestas eget ac erat. Nullam elementum sagittis sollicitudin.</p>
        <a class="button" href="#">Read more</a>
    </article>
    <article class="column-page-column">
        <h3 class="entry-title">Title 2</h3>
        <p>Blah blah blah, more bla bla, lorem ipsum and stuff. Buzz words, and so on, etc etc etc.</p>
        <a class="button" href="#">Read more</a>
    </article>
</div>

CSS

.column-main {
    display: flex;
}
.column-page-column {
    width: 33%;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
}
.column-page-column p {
    flex-grow: 1;
}