Edit in JSFiddle

var i = 0;
   $('#dragbar').mousedown(function(e){
       
        e.preventDefault();
        $('#mousestatus').html("mousedown" + i++);
        $(document).mousemove(function(e){
          $('#position').html(e.pageX +', '+ e.pageY);
          $('#sidebar').css("width",e.pageX+2);
          $('#main').css("left",e.pageX+2);
       })
       console.log("leaving mouseDown");
    });
   $(document).mouseup(function(e){
       $('#clickevent').html('in another mouseUp event' + i++);
       $(document).unbind('mousemove');
       });

<div id="header">
    header
    <span id="mousestatus"></span>
    <span id="clickevent"></span>
</div>
<div id="sidebar">
     <span id="position"></span>
    <div id="dragbar"></div>
    sidebar
</div>
<div id="main">
    main
</div>
<div id="footer">
    footer
</div>

body,html{width:100%;height:100%;padding:0;margin:0;}
#main{
   background-color: BurlyWood;
   float: right;
   position: absolute;
   top:100px;
   bottom: 38px;
   right: 0;
   left:200px;
}
#sidebar{
   background-color: IndianRed;
   width:200px;
   float: left;
   position: absolute;
   top:100px;
   bottom: 38px;
   overflow-y: hidden;
}
#footer{
    background-color: PaleGoldenRod;
    width:100%;
    height: 38px;
    bottom:0;
    position:absolute;
}

#header{
    background-color: wheat;
    width:100%;
    height: 100px;
}

#dragbar{
    background: linear-gradient(#405050,#002B36);
   height:100%;
   float: right;
   width: 7px;
   cursor: col-resize;
}