JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="one">
        <div id="two"></div>
    </div>
</div>

CSS

#container{
    height: 500px;
    background: yellow;
}
#one{
    background: red;
    min-height:100px;
    max-height: 50%;
    padding: 10px;
}
#two{
    background: blue;
    height: 40%;
}