How to expand column height automatically and vertically align its contents? - html

Question

I am trying to expand the height of first three col-md-1 divs to the rows maximum height which is expanded by two col-md-5, and also vertically align its contents. I am using grid system from bootstrap.
<div class="row load-container">
<div class="col-md-1">{{Id}}</div>
<div class="col-md-1"><img src="images/{{statusIcon Status}}" /></div>
<div class="col-md-1"><div class="info-bubble info-bubble-small middle-align {{statusClass}}">{{Class}}</div></div>
<div class="col-md-5 container">
<div class="row">{{From.Name}}</div>
<div class="row">{{From.City}} {{From.State}}, {{From.Zip}}</div>
<div class="row">{{pickupFormatted}}</div>
</div>
<div class="col-md-5 container">
<div class="row">{{To.Name}}</div>
<div class="row">{{To.City}} {{To.State}}, {{To.Zip}}</div>
<div class="row">{{deliveryFormatted}}</div>
<div class="row">{{expectedFormatted}}</div>
</div>
<div class="col-md-1">
{{Weight}}
</div>
<div class="col-md-2">
{{Distance.text}}
</div>
<div class="col-md-2">
{{Duration.text}}
</div>
<div class="col-md-4">
</div>
</div>
Edit:
Here is the method the sort-of works, except that the column widths are no longer affecting actual width.
.load-container {
padding: 5px;
display: table;
width: 100%;
}
.load-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
text-align: left;
}
Ninja-edit:
This seems to work now
.load-container [class*="col-"] {
float: none;
display: table-cell;
vertical-align: middle;
}