JSFiddle - React, Tailwind, and code Playground

HTML

<div id="divAll">
	<div id="div1">
		<table id="tbl1">
			<tr>
				<td>
					top top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top toptop top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top toptop top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top top
					top top top
				</td>
			</tr>
		</table>
	</div>

	<div id="draggable" class="handler_horizontal"></div>

	<div id="div3">
		<table id="tbl2">
			<tr>
				<td>
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
					bottom bottom bottom
				</td>
			</tr>
		</table>
	</div>
</div>

CSS

#divAll
	{
		height:500px;
		width:500px;
		border:1px solid blue;
		position: relative;
	}
	
	.handler_horizontal 
	{ 
		width:100%;
		height: 8px; 
		cursor: row-resize; 
		left: 0; 
		background: url(http://jsfiddle.net/img/handle-h.png) 50% 3px no-repeat; 
		border:1px solid grey;
		margin-bottom:50px;	
		position:absolute;
	}
	
	#div1
	{
		height:60%;
		width:100%;
		border:1px dotted green;
		overflow:auto;
		min-height:50px;
		max-height:450px;
		background-color: #eee;
	}
	
	#div3
	{
		width:100%;
		height:37%;
		border:1px dotted red;
		overflow:auto;
		min-height:50px;
		max-height:450px;
		background-color: yellow;
	}
	
	#tbl1,#tbl2
	{
		word-wrap:break-word;
	}

JavaScript

$(function() {
$( "#draggable" ).draggable({
	drag: function() {
		var position = $( "#draggable" ).position();

		var topPos = position.top;
		var divHeight = 500;

		var div1H = topPos;
		var div3H = divHeight - topPos;
		
		$('#div1').height(div1H);	
		$('#div3').height(div3H);

	},
	axis: "y",
	containment: "#divAll"});
});