JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper">
        <div id="header"><h1>this is a header</h1></div>
            <div id="block12">
                <div id="block1">
                    <p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p></div>
                <div id="block2">
                    <p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p></div>
                <div id="clear"></div>
        
        </div>
    <div id="block3"><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p><p>this is content to fill a div</p></div>
    </div>
</body>

CSS

body{
        height:100%;
        width:100%;
        
        }
        #wrap 
        {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        }
        #header{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:15%;
        }

        #block12{
        position:absolute;
    top:200px;
        width:100%;
        left:0;
         height:auto;
        max-height:40%;
        }
        #block1,#block2{
        float:left;
        overflow-y: scroll;
        text-align:center;
        color:red;
        width:50%;
        height:100%;
        
        }
clear{clear:both;}
#block3{
        position:absolute;
        bottom:0;
        color:blue;
        height:auto;
        max-height:40%;
    overflow:hidden;
        }