如何确保两个div在jQuery Mobile中始终具有相同的高度

Question

I am very new to jquery mobile framework, so kindly bear with me.I am developing a project where i need to show that data in tabular format. So i have used below structure to create left and right column.

<div data-role="controlgroup" data-theme="d" class="ui-grid-m ui-corner-all ui-controlgroup ui-controlgroup-vertical">  
        <div id="left" class="ui-block-m">
            <li>Moisture Sensitivity Level (MSL)</li>
        </div>
        <div id="right" class="ui-block-n">
            <li>  3      </li>
        </div>
</div>

But problem is when i have a large string in any of the one column and shorter string in other column, then height of column get's distorted. So, my question is how can i ensure that both the div(Which i am using as columns having classes ui-block-m and ui-block-n) have same hieght.

Any suggestion is highly appreciated. Thanks in advance!!.

How can i ensure that div with class ui-block-m and div with class ui-block-n

Answer 1

quick and dirty:

$(function(){
    var $m = $('.ui-block-m');
    var $n = $('.ui-block-n')
    if($m.height() < $n.height()){
        $m.css('height',$n.height());
    }else if($m.height() > $n.height()){
        $n.css('height',$m.height());
    }
});