JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<section>
    <div id="main">main</div>
    <div id="sidebar">
        <div id="dragbar"></div>
        sidebar
    </div>
</section>

CSS

body, html {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
section { display:table; width:100%; height:300px;}
#main {
    background-color: BurlyWood;
    display:table-cell;
    position:relative;

}
#sidebar {
    background-color: IndianRed;
    display:table-cell;
    position:relative;
    width:240px;

}
#dragbar {
    background-color:black;
    height:100%;

    position:absolute;
    top:0;
    left: 0;

    width: 3px;
    cursor: col-resize;
}

JavaScript

function resize(drag, main, aside) {
	var i = 0, dragging = false;
	$(drag).mousedown(function(e){
		e.preventDefault();
		var min =500, max = $(document).width() - 240;
		$(document).mousemove(function(e) {
			var newX = e.pageX;
			if (newX >= min && newX <= max) {
				//$(main).css('width', newX);
                //$(aside).css('width', 'auto');
                $(aside).css('width', $(document).width() - newX);
	        }
		});
	});
	$(document).mouseup(function(e) {
	    $(document).unbind('mousemove');
	});
}
resize('#dragbar','#main', '#sidebar');