equal height columns in bootstrap 3 - html

Question

I have the following html:
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="phone-and-email">
<p>[phone] info#example.co.uk</p>
</div>
</div>
<div class="col-md-10">
<div class="icons">
<div class="row">
<div class="col-md-4">
<img src="images/info.png" class="pull-left"/>
<p>How to buy</p>
</div>
<div class="col-md-4">
<img src="images/delivery.png" class="pull-left"/>
<p>Free Delivery</p>
</div>
<div class="col-md-4">
<img src="images/gift.png" class="pull-left"/>
<p>Gift Vouchers</p>
</div>
</div>
</div>
</div>
</div>
</div>
css:
.phone-and-email, .icons {
border-top: 2px black solid;
border-bottom: 2px black solid;
}
I can't make the left column the same height as the right, and I have tried about 5 different solutions. It does work using javascript but I'd rather use css if possible.
How it looks:
How it should look:

Answer 1

One possible solution is to make use of display table for the row and table-cell to achieve the equal height of both grid sections.
Check this bootply.
HTML:
<div class="container">
<div id="onerow" class="row">
<div class="col-md-2 sameheight">
<div class="phone-and-email">
<p>[phone] info#example.co.uk</p>
</div>
</div>
<div class="col-md-10 sameheight icons">
<div>
<div class="col-md-4">
<img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left">
<p>How to buy</p>
</div>
<div class="col-md-4">
<img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left">
<p>Free Delivery</p>
</div>
<div class="col-md-4">
<img src="http://www.bootply.com/assets/i_lovebootstrap.png" class="pull-left">
<p>Gift Vouchers</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.phone-and-email, .icons {
border-top: 2px black solid;
border-bottom: 2px black solid;
}
img{
height:20px;
width:20px;
}
#onerow{
display: table;
}
.sameheight {
float: none;
display: table-cell;
vertical-align: top;
}