JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrapper'>
    <div><span>a</span><div>foot</div></div>
    <div><span>a<br />a</span><div>foot</div></div>
    <div><span>a<br />a<br />a</span><div>foot</div></div>
</div>

CSS

#wrapper {
    display: flex;
    flex-flow: row wrap;
}
#wrapper > div {
    outline: solid 1px black;
    flex: auto;
}
#wrapper > div > span {
    display: block;
    height: calc(100% - 20px);
}