Implement Jquery UI sortable and resizable together

Question

I"m trying to implement a sort and resize for a couple of divs in a grid-like layout.

This is an example fiddle

But the problem is once I resize(make the div bigger) and then when I try to sort the sort is not working properly. Instead of aligning properly it is overflowing out of the other div where the inner-divs are placed.

Resize is not working with the fiddle. This is the correct result that I need to achieve after resizing(assuming max-width resizable is the width of outer div). But in my code, if I try to resize, the elements are overlapping and again if I place it in the right side, the element is overflowing out of the outer container div. (In the result) it is not happening, try keeping div{3} at the position of div{2}

I'm using bootstrap fluid layout. so the divs are sized with span class. this is the code that I'm using

<div class="row-fluid" id="sortable">
            <div class="span6 sort_container"> <div class="well">aaaaaaaaaaaaa</div> </div>
            <div class="span6 sort_container"> <div class="well">bbbbbbbbbbbbb</div> </div>
            <div class="span6 sort_container" > <div class="well">ccccccccccc</div> </div>
            <div class="span6 sort_container"> <div class="well">dddddddddddd</div> </div>
            <div class="span6 sort_container"> <div class="well">eeeeeeeeeeee</div> </div>
        </div>

<script>

$(document).ready(function() {
   $(function() {
        $( "#sortable" ).sortable();
    });

$(function() {
        $('.well').resizable();
    });
});
</script>

Answer 1

damn! I just figured out what went wrong. Instead of calling 'sort_container' class I called '.well' which is the inner div of the elements with resizable() function.

This solved it

<div class="row-fluid" id="sortable">
            <div class="span6 sort_container"> <div class="well">aaaaaaaaaaaaa</div> </div>
            <div class="span6 sort_container"> <div class="well">bbbbbbbbbbbbb</div> </div>
            <div class="span6 sort_container" > <div class="well">ccccccccccc</div> </div>
            <div class="span6 sort_container"> <div class="well">dddddddddddd</div> </div>
            <div class="span6 sort_container"> <div class="well">eeeeeeeeeeee</div> </div>
        </div>

<script>

$(document).ready(function() {
   $(function() {
        $( "#sortable" ).sortable();
    });

$(function() {
        $('.sort_container').resizable();
    });
});
</script>

now only problem is the try increasing the height for about 150% of an element. It leaves some white space der. Is der any way to remove that and bring up the bottom element?

It aligns perfectly if resized horizontaly

example