JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<div id="framecontent">
    <div class="innermargin">

    <h4>Search Result</h4>

    </div>
    </div>


    <div id="maincontent">
    <div class="innermargin">
    <h4>Search Criteria</h4>
    </div>
    </div>

CSS

body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    }
#framecontent{
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 50%; 
    height: 100%; 
    overflow: auto; 
    background:#C3C3C3;
    }

    #maincontent{
    position: fixed;
    top: 0;
    left: 50%;
    right: 0;
    bottom: 130px; 
    overflow: hidden; 
    background: #fff;
    width:50%;
    background:#D2D2D2;
    height:100%
    }

    .innermargin{
    margin: 15px;
    }