Display content of columns at same level/ height

I have column in a div set to display:flex. All the columns are centered. The column contents are all vertical-align: middle; It works great when the content is all of the same height (see snippet). But when one column is taller than the others, I want the shorter columns to be at the same level/ height as the tallest column as in my image below, whilst the tallest column remains vertically in the middle: Is this possible using css or javascript? .cont { height:400px; width: 100% } .button-bottom {display: flex; align-items: center; justify-content: center; height:50%;background: yellow;} .column {width: 20%; display: table-cell; text-align: center; vertical-align: middle; float: none;} <div class="cont"> <div class="button-bottom"> <div class="column"> <h5>Ambience Blah BLha mana na hhsjs</h5> </div> <div class="column"> <h5>Ambience</h5> </div> <div class="column"> <h5>Ambience</h5> </div> <div class="column"> <h5>Ambience</h5> </div> <div class="column"> <h5>Ambience</h5> </div> </div> </div>