Set sibling DIV the equal height (tallest)

Question

I'm trying to set paired divs the same height.

<div class="item ">
Some text
</div>
<div class="item right">
Some text
</div>
<div class="item ">
Some text<br/>Some text<br/>Some text<br/>Some text<br/>Some text
</div>
<div class="item right">
Some text<br/>Some text<br/>Some text<br/>Some text
</div>
<div class="item ">
Some text
</div>
<div class="item right">
Some text<br/>Some text<br/>Some text
</div>

css

.item{width: 45%;float: left;position: relative;border: 1px solid #000;clear:left;}
.item.right{float:right;clear:right;}

jQuery I'm using

$('.item.right').prev().each(function() {
    leftheight = $(this).height();
    rightheight = $(this).next().height();      
    if(leftheight > rightheight){
        $(this).next().height(leftheight);
    }else{
        $(this).height(rightheight);
    }               
});

This doesn't seem to work and I can't figure out why.

I have two column layout where the divs have a pin line border, so it is very obvious when they are not the same height. the 'right class' float the item to the right. I only want the pairs the same heights as they will form a row. I don't want to use tables (css or otherwise) as the layout is dynamic for mobile (where they form a single column).

Answer 1

You can use map() to get the heights of the div left/right elements in to an array, then Math.max on the array to get the tallest, and use that value for both of them. Try this:

$('.item.right').each(function() {
    var $divs = $(this).add($(this).prev('.item'));
    var tallestHeight = $divs.map(function(i, el) {
        return $(el).height();
    }).get();
    $divs.height(Math.max.apply(this, tallestHeight));
});

Example fiddle