Отображать содержимое столбцов на том же уровне/высоте

Question

У меня есть столбец в div, установленном на display:flex. Все столбцы центрированы. Содержание колонны - все vertical-align: middle;

Это прекрасно работает, когда содержимое имеет одинаковую высоту (см. Фрагмент). Но когда один столбец выше, чем у других, я хочу более короткие столбцы, чтобы быть на одном уровне/высоте, как самой высокой колонки, как и в моем изображении ниже, в то время как самая высокая колонна остается вертикально посередине:

Is это возможно с помощью css или 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>

Answer 1

Я делаю это для очков. Вот ваше исправление.

.cont { height:400px; width: 100% } 
 
.button-bottom {display: flex; 
 
justify-content: center; height:50%;background: yellow;} 
 
.column {width: 20%; 
 
display: table-cell; 
 
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>

Answer 2

https://jsfiddle.net/ex3ntia/r67y6hhu/3/

Я добавил 2 Css строки, которые вы можете удалить

/* demo */ 
h5 {position:relative;} 
.column h5:before {display:block;background-color:red;content:'';width:100%;height:2px;top:15px;position:absolute;}