Edit in JSFiddle

<div id="container">
    <div id="top">Longer text that will be wraped but everything still looks right.</div>
    <div id="left">Left</div>
    <div id="center">Center</div>
    <div id="right">Right</div>
</div>
<div id="resizer"></div>

// On dragmove change the #container element dimensions
// and trigger the resize event
$('#resizer').on('dragmove', function(ev, drag) {
    $('#container').width(drag.location.x())
        .height(drag.location.y())
        .trigger('resize');
});

$('#left, #center, #right').on('resize', function() {
    // Set the new height for all elements
    var newHeight = $('#container').height() - $('#top').outerHeight(true);
    $(this).outerHeight(newHeight);
});

$('#center').on('resize', function(ev) {
    // Set the width for the center element
    var newWidth = $('#container').innerWidth()
            - $('#left').outerWidth()
            - $('#right').outerWidth() - 1;                        
    $(this).outerWidth(newWidth);
});

$(document).trigger('resize');

body{ 
    font-family: Helvetica,"Lucida Grande","Lucida Sans",Arial,Helvetica,sans-serif;
}

div {
    overflow: hidden;
}

#container {
    width: 450px;
    height: 250px;
    background-color: #EFEFEF;
}

#top {
    background-color: yellow;
    margin-bottom: 10px;
    padding: 10px;
}

#left {
    float: left;
    background-color: red;
    width: 80px;
    padding: 10px;
}

#center {
    float: left;
    background-color: grey;
    padding: 10px;
}

#right {
    float: right;
    background-color: green;
    padding: 10px;
}

#resizer {
    background-color: blue;
    cursor: pointer;
    position: absolute;
    left: 450px;
    top: 250px;
    padding: 5px;
}