JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html style="width:100%;height:100%">
<head>
	<title></title>
</head>
<body style="width:100%;height:100%">
	<table style="width:100%;height:100%">
		<tr style="height:1px"><td colspan="3">[header]</td></tr>
		<tr style="height:100%">
			<td style="width:1px">[left]</td>
			<td>
				<div style="background-color:#FEE;width:100%;height:100%;overflow:auto">
					<div style="background-color:#DDF;display:table;table-layout:fixed;width:100%;height:100%">
						<div style="background-color:#DFD;display:inline-block;padding:10px;white-space:nowrap">
							Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus.<br />
							Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. <br />
							Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. <br />
							Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. <br />
							Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. <br />
							Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. <br />
							Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. <br />
							Phasellus ipsum. Nunc tristique tempus lectus.
						</div>
					<div style="display:inline-block;width:0px"></div>
				</div>
				</div>
			</td>
			<td style="width:1px">[right]</td>
		</tr>
		<tr style="height:1px"><td colspan="3">[footer]</td></tr>
	</table>
</body>
</html>

CSS

body, div, table, tr, td {
    margin: 0px;
    padding: 0px;
}
table { border-collapse: collapse; }

JavaScript

$(function() {});