JSFiddle - React, Tailwind, and code Playground

by bchapman26

HTML

<div class="wrapper">
    <div class="resizeContainer">
        <div class="header">Header</div>
        <div class="main">
            <div class="maps">
            <div class="infoPanel">
                <div class="infoContainer">
                <p>button1</p>
                <p>Button2</p>
              <div class="list">
                <p>info</p>
                <p>info1</p>
                <p>info2</p>
                <p>info3</p>
                <p>info4</p>
                <p>info5</p>
                <p>info6</p>
                <p>info7</p>
                <p>info8</p>
                <p>info9</p>
                <p>info10</p>
                <p>info11</p>
                <p>info12</p>
                <p>info13</p>
                <p>info14</p>
                <p>info15</p>
                <p>info16</p>
                <p>info17</p>
                <p>info18</p>
              </div>
                </div>
            </div>
            <div class="mapContainer">map</div>
        </div>
        </div>
    </div>
    <div class="footer">Footer</div>
    
    
</div>

CSS

html,body {
    font-size:100%;
    height:100%;
}

.wrapper{      
  background-color:#aaaaaa;
  height:100%;
}

.resizeContainer {
    background-color:#cccccc;
  position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
    
}

.header {
    background-color:#aaaaff;
    height:2.25em;
    position:fixed;
            top:0;
            left:0;
            right:0;
}

.main {
    position: absolute;
            top: 2.25em;
            bottom: 1.5em;
            left:0;
            right:0;
}

.maps {
      background-color:#ffaaaa;
  position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
}

.infoPanel {
    background-color:#ffffaa;
    position:absolute;
    left:0;
    width:12.5em;
    top:0;
    bottom:0;
}

.infoContainer{
  postion:relative;
    height:100%;
    overflow:auto;
}

.list {
    border: 1px solid black;    
}

.mapContainer {
    postion:absolute;
    top:0;
    left:12.5em;
    right:0;
    bottom:0;
}

.footer {
    background-color: #aaffaa;
    position:fixed;
            bottom:0;
            left:0;
            right:0;
    line-height: 1.5em;
    width: 100%;
    text-align: left;
}