JSFiddle - React, Tailwind, and code Playground
HTML
<div class="flex">
<div>
<div class="flex -vertical">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. molestiae repellendus magnam, nulla possimus. Consequuntur quidem molestias corporis sequi, dolorem nihil, at.
</div>
<div class="-static">Aligned Text</div>
</div>
</div>
<div>
<div class="flex -vertical">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus officiis, vel obcaecati!
</div>
<div class="-static">Aligned Text</div>
</div>
</div>
<div>
<div class="flex -vertical">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div>
<div class="-static">Aligned Text</div>
</div>
</div>
</div>
CSS
.flex {
display: flex;
}
.flex .flex {
height: 100%;
}
.flex.-vertical {
flex-direction: column;
}
.flex > div.-static {
flex-grow: 0;
border-top: 1px solid;
}
.flex > div {
background: #fff;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
padding: 1rem;
}