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!!!