JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    <section>
        <div>Div with 50% height of parent</div>
    </section>
</article>

CSS

* { box-sizing: border-box; }

html { height: 100%; }

body {
	height: 100%;
	margin: 0;
}

article {
	height: 100%;
	background-color: red;
	padding: 10px;
}

section {
	height: 100%;
	background-color: green;
	padding: 10px;
}

div {
	height: 50%;
	background-color: aqua;
}