how to adjust div width based on other div postion

Question

I have two div's one is div-content(red color) and second is div-content2(yellow color).div-content size is 0 to 50% and div-content2 size 50% to 100%.

Now In my screen 50% div-content and 50% div-content2

I need div-content1 drag left to right div-content1 width is 70 .In that time div-content2 will be 30.if div-content2 drag right to left width is 65 , in that time div-content width 35

finely when increases and content remain content will auto adjust So Please give me any Idea.

I am now to Stackoverflow .if i wrong to write Please guided me .

Thanks in Advanced

Answer 1

just the concept of it:

    
    var drag = false,
    maxW = $('.wrap').width();
    $('.div1').click(function(){}).mousedown(function(event){
      drag = true;  
    });

$(document).mousemove(function(event){
    if(drag) {
        if($('.div1').width() < maxW) {
            $('.div1').width(event.pageX); 
        }
    }
}).mouseup(function(){
    drag = false;
});

.wrap {
    width:100%;
    position: relative;
}
.div1,
.div2 {
    width:50%;
    height:300px;
}

.div1 {
    position: absolute;
    top:0;
    left:0;
    z-index:1;
    width: 50%;
    background-color:red;
    cursor:e-resize;
}

.div1:focus {
    cursor:e-resize;
}

.div2 {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
    <div class="div1"></div>
    <div class="div2"></div>
</div>