JSFiddle - React, Tailwind, and code Playground

HTML

<body class="red-border">
<div class="blue-border" style="display: flex; flex-direction: column; width: 100%; height: 100%;">
    <div  style="flex: 0 1 auto; ">top</content></div>
	<div class="green-border"  style="flex: 1 1 100%; display: flex; flex-direction: row; width: 100%;" >
        <div style="flex: 0 1 auto;">left</div>
        <div style="flex: 1 1 100%; width: 100%; display: flex;">
			<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>
        </div>
        <div style="flex: 0 1 auto; ">right</div>
    </div>

    <div style="flex: 0 1 auto; ">bottom</content></div>
</div>
</body>

CSS

html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    div {
        border: 1px solid black;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .red-border {
        border: 5px solid red;
    }

    .blue-border {
        border: 5px dashed blue;
    }

    .green-border {
        border: 5px solid green;
    }