JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en" style="height:100%;width:100%;border:3px solid red">
	<head>
		<meta charset="utf-8">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
		<style>
			* {
				box-sizing: border-box
			}
		</style>
	</head>
	<body style="height:100%;width:100%;border:3px solid blue;margin:0;padding:8px">
		<div id="allBodyDiv" style="width:100%;height:50%;border:3px solid black;display:table">
			<div class="leftWithinBodyDiv" style="border:3px solid blue;display:table-cell">
			</div>
			<div class="rightWithinBodyDiv" style="width:100px;border:3px solid red;display:table-cell">
			</div>
		</div>
		<script>
			$(function() {
				$(".rightWithinBodyDiv").resizable({});
                $(".leftWithinBodyDiv").resizable({});
			});
		</script>
	</body>
</html>