JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<div id="outer">
    This is wrapper Div<br/>
    This is wrapper Div<br/>
    This is wrapper Div<br/>
    <div id="top">
        ===========Top===========<br/>
         ===========Top===========<br/>
         ===========Top===========<br/>
         ===========Top===========<br/>
         ===========Top===========<br/>
    </div>
    <div id="bottom">
        ===========Bottom===========<br/>
         ===========Bottom===========<br/>
         ===========Bottom===========<br/>
         ===========Bottom===========<br/>
         ===========Bottom===========<br/>
    </div>
    This is wrapper Div<br/>
    This is wrapper Div<br/>
</div>

CSS

#outer {
    overflow:hidden; 
    padding-left:250px;
    border: 1px solid green;
    background-color:limegreen;
    height: 175px;
}

#bottom {
    display:none
}
#outer #bottom {
    display:block;
    position:absolute;
    left:50; top: 50;;
    border: 1px solid blue;
    background-color:white;
}