JSFiddle - React, Tailwind, and code Playground

by Sebastian Brosch

HTML

<div id="wrapper">
  <div class="top-wrapper">
    <div id="flex">
      asdddddddddddd dddd dfdfd dfdfdfd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
    </div>
    <div id="static-left">
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
      asd<br/>
    </div>
  </div>
  <div id="static-bottom">
    asd<br/>
    asd<br/>
    asd<br/>
    asd<br/>
  </div>
</div>

CSS

body {
  background-color: black;
}
.top-wrapper {
  align-items:stretch;
  align-self:flex-start;
  display:flex;
  flex-direction:row;
  height:100%;
  max-height:250px;
  width:100%;
}
#wrapper {
  align-items:stretch;
  border:3px solid #f00;
  display: flex;
  flex-direction: column;
  flex-wrap:nowrap;
  height:300px;
  margin:10px auto 0;
  overflow:hidden;
  width:50%;
}
#flex {
  background-color:blue;
  flex-grow:1;
  overflow:auto;
  padding:10px;
  word-wrap:break-word;
}
#static-left {
   background-color:yellow;
   border-left:3px solid #f00;
   overflow-y:auto;
   width:140px;
}
#static-bottom {
  background-color:green;
  border-top:3px solid #f00;
  box-sizing:content-box;
  height:50px;
  width:100%;
}