JSFiddle - React, Tailwind, and code Playground

by kirky93

HTML

<body>
    <div class="container">
        <div style="border: 5px solid teal"
                 class="section-one">
            Numero uno<br/>
            uno<br/>
                     uno<br/>
                     uno<br/>
                     uno<br/>
                     uno<br/>
                     uno<br/>
                     uno<br/>
                     uno<br/>
                     uno<br/>
                     uno<br/>
                     
        </div>
        <div style="border: 5px solid gold"
                 class="section-two">
            Numero dos<br/>
            dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
                     dos<br/>
        </div>
    </div>
</body>

CSS

.container {
  position: relative;
  border: 5px solid magenta;
  height: 100%;
}
nav {
  position: absolute;
  left: 0px;
  width: 200px;
}
section {
  /* position is static by default */
  margin-left: 200px;
}
div {
    box-sizing: border-box;
}
.section-one {
    max-height: 30%;
    overflow-y: auto;
}
.section-two {
    max-height: 70%;
    overflow-y: auto;
    
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 70px;
  background-color: white;
  width: 100%;
}
body, html {
  box-sizing: border-box;
  height: 100%;
  margin: 0px;
}