JSFiddle - React, Tailwind, and code Playground

by changduk kim

HTML

<div id="body">
  <div class="long">
    <div class="half-height" style="background-color:blue"></div>
    <div class="half-height" style="background-color:yellow"></div>
  </div>
  
  <div id="left-side" class="side">
    <div class="long">    
      <div class="half-height" style="background-color:red"></div>
      <div class="half-height" style="background-color:green"></div>
    </div>
  </div>
  
  <div id="right-side" class="side">
    <div class="half-height" style="background-color:black"></div>
    <div class="half-height" style="background-color:white"></div>
  </div>
  
</div>

CSS

#body {
  height:300px;
  width:300px;
  background-color:white;
  overflow:auto;
  position:relative;
}

.long {
  height:500px;
}

.half-height {
  height:50%;
}

.side {
  height:100%;
  position:absolute;
  width:30%;
  background-color:white;
  top:0;
  overflow:auto;
}

#left-side {
  left:0;
}

#right-side {
  right:0;
}