How to make DIVs resizable from not all sides

Question

I have some kind layout made using bootstrap.

 <div class = row style="width:400px; height:400px">
        <div class = "col-sm-12" style="height:50%; border:2px solid;"></div>
        <div class = "col-sm-6" style="height:50%; border:2px solid;"></div>
        <div class = "col-sm-6" style="height:50%; border:2px solid;" ></div>
 </div>

Visually it looks:

Maybe someone can suggest any framework, or code solution to make DIVs re sizable, but only in some directions, not allow to re size sides which are outer. Here is explanation in picture:

Maybe someone can sugest code or lib how to make that. I use angular, bootstrap.

Answer 1

From the picture I understand you want to drag and resize div from border lines.

css3 has a resize property with syntax:

resize: none|both|horizontal|vertical|initial|inherit;

with following css:

div {
   resize: both;
   overflow: auto;
}

You get nicely resizable box from both vertical and horizontal.

More:

http://www.w3schools.com/cssref/css3_pr_resize.asp

Note: This feature, though, is not supported by IE.