Although absolute position is a quick fix, a more robust solution that works with many columns would be much better.
Here is my solution in this updated fiddle.
[class*='cols-'].row > *{
float: none;
position: relative;
display: inline-block;
/* old ie fixes */
*zoom: 1;
*display: inline;
}
.row.cols-bottom > *{
vertical-align: bottom;
}
.row.cols-middle > *{
vertical-align: middle;
}
and html:
<div class="row cols-bottom">
<div class="col-xs-4">
<h3>Heading</h3>
<h4>Sub Heading</h4>
<!-- The lack of space between div tags below does MATTER -->
</div><div class="col-xs-4">
<button class="btn btn-primary">Button </button>
<!-- The lack of space between div tags below does MATTER -->
</div><div class='col-xs-4'>
This col should be 3
</div>
</div>
There are a couple of things to note in my solution. The inline-block strategy used allows positioning of the div columns to stay in the flow of the document, while also allowing the use of vertical-align styling. I've included a style for bottom alignment and middle alignment for you convenience (I tend to use the middle alignment just as often).
The second thing to note is you must have each of the respective ending-column </div>
and starting-column <div>
meet with no space in between. This is because inline-block gives 'space' to any character (including a space character). Essentially, it is because a space character has a given font-size, which ends up pushing the respective right most columns underneath the left most columns. There are hacks to overcome this, but they are note cross-browser compatible, so I did not include them. Therefore, my solution is hack-free, and works with multiple columns. Enjoy!