JSFiddle - React, Tailwind, and code Playground

by lithium182

HTML

<div id="main">
    <div id="check">
    </div>
    <div id="rest">
        <div id="first">
        </div>
        <div id="second">
        </div>
        <div id="third">
        </div>
    </div>
</div>

CSS

#main {
    width: 100%;
    height: 100px;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
}

#check {
    background-color: blue;
    width: 50px;
    height: 100%;
    float: left;
    flex: 0 0 auto;
}

#rest {
    background-color: red;
    height: 100%;
    flex: 1 1 auto;
}
#first {
    background-color: green;
    height: 50%;
    width: 50%;
    float: left;
}
#second {
    background-color: black;
    height: 50%;
    width: 50%;
    float: left;
}
#third {
    background-color: orange;
    height: 50%;
    width: 100%;
}