JSFiddle - React, Tailwind, and code Playground

by Edgar Martinez

HTML

<div class='co' id='cont'>
<div class='resizeMan' id='coe'></div>
</div>

CSS

.co{
	background-color:red;
	position:absolute;
	right:1%;
	width:100px;
	height:70%;
	z-index:2;
}
.resizeMan{
	cursor: e-resize;
	height:100%;
	width:5px;
	z-index:99;
	background-color:green;
}

JavaScript

var currentMousePos={x:0,y:0};
var posOnClick={x:0,y:0};
var resizeEstade=false;
var docW=$(document).width();
var mx=0;

$('.resizeMan').mousedown(function(e1){
     mx = e1.pageX;//register the mouse down position
    resizeEstade=true;

})
$(document).mousemove(function(e2){
        
				if(!resizeEstade){return false;}
				
				var resfinal=0;
        var my=parseInt($(".co").css("width"));
				
				
				
					console.log(docW,my);
					
        if (e2.pageX > mx){ //-
					//if(my>docW){return false;}
						var res=e2.pageX-mx;
						 resfinal=my-res;						
					   console.log("+");
						 	$(".co").css("width",(resfinal)+"px");
        } else {//+
				
						var res=mx-e2.pageX;
						 resfinal=my+1;						
					  console.log("-");
							$(".co").css("width",(resfinal)+"px");
        }
			
					//console.log(e2.pageX , mx,my,res,resfinal,docW);
				
});

$(document).mouseup(function(el){
//	mx = el.pageX;//register the mouse down position
	resizeEstade=false;
				
});