web page responsive resizable grid design with 3 resizable areas

I hope this is the right place to ask this,
I want to make a web page with 3 div inside a container
in a way that the left and right div are resizable
while the center div gets resized accordingly to the left and right div,
something like the coding areas in plunker or jsfiddle,
the 3 areas must stay horizontal no jumping to the next line.
This problem has been bugging me for almost a week now any help or pointer to the right direction is appreciated.

Note: I'm using AngularJs for this project an answer with Angulary approach is favorable but other approach are acceptable.

Update:

I wasn't clear about the resizable part, I meant resizable by the user not just resizable when the browser gets resized, meaning if you look at my example you'll see that when you click on the border the associated area slide out and the center area gets resized to the right size now my problem with what i have is that's not responsive and it's buggy, when the both left and right area are hidden, clicking to reopen the right area will show a bug in the behavior of the center area when it's getting resized, just like in jsfiddel when you resize the javascript area the css and result areas gets resized.
Better example MS PowerPoint when you resize the left and right panel the center gets accordingly resized.

Here's my plnkr, I hope this's clear enough.
Thanks in advance.

Oh I missunderstood the question. He asked for a resizeable grid instead of equal height columns.

Here is a very simple example of how vertical resizing can be applied to some container using jQuery

Sources in this jsFiddle

Basic Javascript:

var diff = {x: resizeStart.x - e.clientX,y: resizeStart.y - e.clientY}; //Get the difference
resizeStart = {x: e.clientX, y: e.clientY}; // set new starting point

$('.left').width($('.left').width() - diff.x); // Set width of left container
$('.center').css('margin-left', parseInt($('.center').css('margin-left')) - diff.x); //Set margin of center container

I saved the point where the drag starts and get the delta of the point where the mouse is. Then I add this delta to the width of the left container and the margin to the center container.

Hope this helps.

there is no default way to handle this because the right and left container will fall out of the layout when floating them to the right or the left.

The only way to handle this is to get the height of the left and the right container after the page has been loaded and set the minimum height of the center container to this value.

An example to get this feature with jQuery is in this jsFiddle

HTML: 

<div class="left">
    <div class="left-content">
        Left Column <br/><br/><br/>more rows please...<br/><br/><br/>more rows please...
    </div>
</div>
<div class="right">
    <div class="right-content">
        Right Column <br/><br/><br/>more rows please...
    </div>
</div>
<div class="center">
    <div class="content">
        Center Column
    </div>
</div>

CSS: 

.left {
    float: left;
    width: 200px;
    background: red;
}
.right {
    float: right;
    width: 200px;
    background: green;
}
.center {
    margin: 0 200px;
    background: yellow;
}

JS: 

$(document).ready(function() {
    var max_height = 0;
    $('.left, .right, .center').each(function() {
        if($(this).outerHeight() > max_height) max_height = $(this).outerHeight();
    }).css('min-height', max_height);   
});

There are also a lot of CSS tricks which are not valid or very complicated but they also work. Search for "equal height boxes".