JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
		<div id="child">
			<div id="child_1"></div>
			<div id="child_2">
				Content
			</div>
		</div>
		<div id="child2"></div>
	</div>

CSS

html, body { height: 100%; }
	#parent { width: 50px; height: 1px; min-height: 100%; }
	#child { width: 50px; height: 1px; min-height: 80%; background-color: blue; }
	#child_1 { height: 50%; background-color: black; }
	#child_2 { min-height: 50%;  background-color: pink; }
	#child2 { width: 50px; height: 20%;  background-color: orange; }