Trying to vertically align two columns in zurb foundation - html

Question

I'm using Zurb Foundation with Sass Compass, but this could a problem for anything in css.
So, I have code like this
<div class="row">
<div class="small-6 column">...</div>
<div class="small-6 column">...</div>
</div>
The columns have content of differing height determined by how much text and images I want to put in there. The row has no explicit height and determined by the height of the tallest column. Now the tallest column will be shown as is, but the other one which is shorter, I'd like it's content to be centered vertically. I have looked around for this and I've tried using display: table and relative positioning, but none of them offers what I need.

Answer 1

Wrap the vertical aligned text in a div with the same height as its parent and display:table-cell it (after displaying its parent as a table):
HTML
<div class="row">
<div class="small-6 column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et iaculis justo. Mauris bibendum convallis est, vel blandit quam tempor aliquet. Cras euismod nibh et nisl congue, eget tincidunt mauris consectetur. Donec eu risus lectus. Integer at ipsum sed turpis fringilla adipiscing vitae vel enim.</div>
<div class="small-6 column"><div class="v_align">Some text</div></div>
<div class="clear"></div>
</div>
<div style="width:200px; height:100px; background:#0f0; color:#fff;">dfbvd bdfhgf hfg hghf gfdh hfgghfd hgf</div>
CSS
.row{
width:300px;
height:auto;
}
.clear{clear:both;}
.column:first-child{
color:#f00;
background:#ccc;
}
.column:nth-child(2){
background:#999;
color:#00f;
display:table;
}
.column{
width:150px;
float:left;
}
.v_align{
display:table-cell;
vertical-align:middle;
}
JS
$(document).ready(function(){
var rowHeight = $(".row").height();
console.log(rowHeight);
$(".column").height(rowHeight);
$(".v_align").height(rowHeight);
});
Check the result: http://jsfiddle.net/gespinha/h6aPf/6/