Vertical DIV alignment within Bootstrap 3 Grid with CSS - html

Question

I'm using bootstrap 3, and I have problems when I want to align vertically two div, for example ( http://jsfiddle.net/Xelnag/335nhneq/ )
<div class="row">
<div class="col-sm-6 vbox">
<img src="img/1.png" class="icon-16"/>
<img src="img/2.png" class="icon-16"/>
</div>
<div class="col-sm-6">
<img src="img/3.png" class="icon-32"/>
<img src="img/4.png" class="icon-32"/>
<img src="img/5.png" class="icon-32"/>
</div>
</div>
CSS for "vbox" is just a vertical align:
.vbox { vertical-align: bottom; }
What i would like to see is left div aligned to bottom to match the right side.
I have seen answers in stackoverflow with the use of javascript but so far i have found none that works with just CSS with the bootstrap 3 responsive design.

Answer 1

I found the best way. You need to follow below code.
Check out this fiddle: http://jsfiddle.net/harnishdesign/335nhneq/2/
HTML
<div class="row">
<div class="table-container">
<div class="col-xs-6 vbox" style="border:1px solid #000">
<img src="img/1.png" class="icon-16"/>
<img src="img/2.png" class="icon-16"/>
</div>
<div class="col-xs-6 vbox" style="border:1px solid #F00">
<img src="img/3.png" class="icon-32"/>
<img src="img/4.png" class="icon-32"/>
<img src="img/5.png" class="icon-32"/>
</div>
</div>
</div>
CSS
.table-container .vbox {display: table-cell;
float: none;
vertical-align: bottom;
}
.table-container {
display: table;
table-layout: fixed;
width: 100%;
}
.icon-16
{
width: 16px;
height: 16px;
}
.icon-32
{
width: 32px;
height: 32px;
}