JSFiddle - React, Tailwind, and code Playground

by bd22

HTML

<!--https://www.w3tweaks.com/javascript/resize-div-box-horizontally-using-jquery-draggable.html-->

<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
  
<div id="mainContent" class="mainContent" style="height: 1208px;">

		 <div id="mainContentHolder">
		 	<div id="draggableH" class="ui-draggable ui-draggable-handle" style="top: 840px; left: 0px;"></div>
      
		 	<div id="main-left" class="main-top" style="height: 840px;">
		 		<div class="left-inner-content">
		 			<div class="left-inner-main">
		 				<h2>Top</h2>
		 			</div>
		 		</div>
		 	</div>
      
		 	<div id="main-right" class="main-bottom" style="height: 348px;">
		 		<div class="right-inner-content">
		 			<div class="right-inner-main">
		 				<h2>Bottom</h2>
		 			</div>
		 		</div>
		 	</div>
	 	</div>
	 </div>

CSS

.mainContent{
    overflow: hidden;
    background: #efefef;
}
.left-inner-content,.right-inner-content{
    padding-left: 10px;
    padding-right: 10px;
}
.left-inner-main,.right-inner-main{
	background: #FFF;
	overflow: auto;
}
.left-inner-main div,.right-inner-main div{
	height: initial;
}
#mainContentHolder{
	position: relative;
}
.main-top,.main-bottom{
	overflow: auto;
	height: 370px;
	background: #fff;
    margin-left: 10px;
    margin-right: 10px;
}
.main-bottom{
	margin-top: 10px;
}
#draggableH{
	position: absolute;
    z-index: 3;
    width: 10px;
    cursor: row-resize;
    background: transparent;
    height: 10px;
    width: 100%;
    background: #efefef;
}

JavaScript

$( document ).ready(function() {
    		// Initial call
		    resizeWindow();

		    $( window ).resize(function() {
		  		resizeWindow()
			});

			function calculatepercent(position) {
				var a = position;

				$('div.main-top').height(position);
				$('div.main-bottom').height($("#mainContent").height() - (position + 20));
			};

			$( "#draggableH" ).draggable({ 
				axis: "y",
				start: function(a) {
					calculatepercent(a.target.offsetTop);
				},
				drag: function(b) {
					calculatepercent(b.target.offsetTop);
				},
				stop: function(c) {
					calculatepercent(c.target.offsetTop);
				}
			});

			function resizeWindow(){
				$("#mainContent").height($("body").height() - $(".header").height());

				var height = (($("body").height() - $(".header").height())/2)-10;

		    	$("#draggableH").css({
				   'top'	: height
				});

		    	$(".main-top").css({
				   'height'	: height
				});

		    	$(".main-bottom").css({
				   'height'	: height
				});
			};
		});