jQuery height() not changing on resize

I never had this problem before but I can't seem to find the solution, so I hope you guys can help me out.

jQuery

function setTheHeight() {

    if( $('#main.level1 .block.attention .block-content').length ) {
        //Get value of highest element
        var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
            function() {
                return $(this).height();
            }
        ));
        console.log(maxHeight);
        $('#main.level1 .block.attention .block-content').height(maxHeight);
    }
}

setTheHeight();

$(window).resize(function() {
    setTheHeight();
});

Basicly what this function does is check for the highest div and set the height of all selected div's to this height. This works fine. BUT it's a responsive design so when the user resize's his browser the content gets smaller and the div higher. So i added a resize event. The event is being fired but it's not changing the height. Any idea's why the resize is not changing the height?

Quick jsFiddle to show what happens: http://jsfiddle.net/3mVkn/

FIX

Hmm this was just plain stupid. Because I was setting the height() it was already fixed so all I had to do is just reset the height and it worked.

Updated code:

function setTheHeight() {

    if( $('#main.level1 .block.attention .block-content').length ) {

        //Reset height
        $('#main.level1 .block.attention .block-content').height('auto');

        //Get value of highest element
        var maxHeight = Math.max.apply(Math, $('#main.level1 .block.attention .block-content').map (
            function() {
                return $(this).height();
            }
        ));
        console.log(maxHeight);
        $('#main.level1 .block.attention .block-content').height(maxHeight);
    }
}

setTheHeight();

$(window).resize(function() {
    setTheHeight();
});