JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<div id="wrap">
    <div id="block12">
        <div id="block1"></div>
        <div id="block2"></div>
        <div class="clear"></div>
    </div>
    <div id="block3"></div>
</div>

CSS

html, body
{
    height: 100%;
}
#wrap {
    width: 100%;
    height: 100%;
    background-color: yellow;
}

#block12 {
    width: 100%;
    max-height: 49%;
    background-color: red;
}

    #block1, #block2 {
        background-color: blue;
        width: 50%;
        height: 100%;
        float: left;
        overflow-y: scroll;
    }


#block3 {
    background-color: green;
    width: 100%;
    height: 49%;
    overflow: auto;
    /*background: blue;*/
}

.clear { clear: both; }