JSFiddle - React, Tailwind, and code Playground

by abubelinha

HTML

<div id="left">
left
</div>
<div id="parent">
    <div id="top">u</div>
    <div id="bottom">f</div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%:
}    
#left {
    float: left;
    width: 49%;
    height: 100%;
    max-height: 600px;
    max-width: 400px;
    border:1px solid red;
}

#parent {
    width: 50%;
    height: 100%;
   /* max-height: 600px;
    max-width: 400px;*/
    border:1px solid red;
    float: left;
}

#top {
height: 30%;
width: 100%;
background-color:blue;
}

#bottom {
    height: 70%;
    width: 90%;
    background-color:orange;
}