JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
	<div id="main_left">
		<div id="left_top">
			left_top
		</div>
		<div id="left_bottom">
			<div id="controls_left"></div>
			<div id="controls_right">
				<div id="dd_container">
					<button onclick='document.getElementById("dd").classList.toggle("hideelem")'>show/hide</button>
					<div id="dd">
						<ul>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
							<li>foobar</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="main_right">
		right
	</div>
</div>

CSS

html, body{
	box-sizing: border-box;
	width:100%;
	height:100%;
	margin:0px;
	padding:0px;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
#outer{
	width:100vw;
	height:100vh;
	display: flex;
	border: 2px solid black;
}

#main_left{
	flex:1;
	border:2px solid blue;
	min-width: 400px;

	display: flex;
	flex-direction: column;
}

#main_right{
	flex:1;
	border:2px solid red;
}

#left_top{
	flex: 1;
	border:2px solid green;
	min-height: 400px;
}
#left_bottom{
	flex:1;
	border:2px solid yellow;

	display: flex;
}

#controls_left, #controls_right{
	flex: 1;
	border: 2px solid black;
}
#controls_left{
	min-width: 60%;
}
.hideelem{
	display: none;
}

#controls_right{
	overflow-y: scroll;
}