JSFiddle - React, Tailwind, and code Playground

by Stefan Froehlich

HTML

<div id="parent">
                <div id="top"></div>
                <div id="bottom"></div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%:
}    
#parent {
    width: 100%;
    height: 100%;
    max-height: 600px;
    max-width: 400px;
}

#top {
height: calc(50% - 10px);
width: 100%;
    background:green;
}

#bottom {
    height:  calc(50% - 10px);
    width: 100%;
    background:yellow;
    margin-top:20px;
}