3 columns same height - html

Question

I'm trying to set the same hight for three columns. I've been looking around internet and I tried several options, but any of them seems to be working.
Here is the code:
html
<div class="container">
<div id="firstBlockGroup" class="col-md-24">
<div class="columnLayout col-md-8 col-sm-8 col-xs-24">
<img class="imageOfColumn" src="images/leftImg.png" alt=""/>
<div class="descriptionPic">
<span class="titleLabelPic">BORDEAUX 2014</span>
<span class="descLabelPic">Read our honest review of this interesting most recent vintage</span>
<span class="moreLabelPic">If it's a lemon, we call it a lemon >>></span>
</div>
</div>
<div class="columnLayout col-md-8 col-sm-8 col-xs-24">
<img class="imageOfColumn" src="images/middleImg.png" alt=""/>
<div class="descriptionPic">
<span class="descLabelPic">Decorum Vintners' Producer of the Month</span>
<span class="descLabelPic">June 2015</span>
<span class="moreLabelPic">Domaine ETIENNE SAUZET >>></span>
</div>
</div>
<div class="columnLayout col-md-8 col-sm-8 col-xs-24">
<img class="imageOfColumn" src="images/rightImg.png" alt=""/>
<div class="descriptionPic">
<span class="descLabelPic">Discover incredible wines from Queen Victoria's favourite region in Germany</span>
<span class="moreLabelPic">Mosel Superstars >>></span>
</div>
</div>
</div>
</div>
css
.columnLayout {
padding: 0px;
margin-right: 20px;
width: 32.4%;
height:100%;
}
.columnLayout img{
width:100%;
}
.columnsContainer{
padding-bottom:50px;
}
#firstBlockGroup{
margin-bottom:50px;
overflow:hidden;
padding:0;
display:inline;
}
div.columnLayout:last-child{
margin-right: 0 !important;
}
.descriptionPic{
background-color:#fff;
padding:10px;
}
.descriptionPic span{
display:block;
}
.titleLabelPic{
text-transform: capitalize;
}
.descLabelPic{
color:#78777d;
}
.moreLabelPic{
color:#58575f;
font-weight:400;
}
.imageOfColumn{
width:100%;
height:220px;
}
I've been trying to put it on JSfiddle but they appear displayed in block, no column next each other....
Can someone give me a hand? I don't know what I'm doing wrong...
Cheers!!!

Answer 1

in your .columnLayoutclass add a min height property e.g.min-height:200px; so that all the container should have a minimum height and if your content within these blocks is more than they will adapt to the new height.

Answer 2

Try display: table on your container div, and display: table-cell on the columns.