JSFiddle - React, Tailwind, and code Playground

Image Block Solution D: Relative position (Container) and absolute position (leftCol)

by Ttt Yyy

HTML

<!DOCTYPE HTML> 
<!-- <head /> 
<body> -->
  <div class='container'>
  <div class="leftCol">
    <div>
       Test left
    </div>
    <div>
      Test left 2
    </div>
  </div>
  <div class="rightCol">
    <div>
       Content Body
    </div>
<div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
       <div>
       Content Body
    </div>
<div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
       <div>
       Content Body
    </div>
<div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
       <div>
       Content Body
    </div>
<div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
  </div>
  </div>
  
<!--  </body>-->

CSS

/* relative position for container, absolute position for leftCol*/
.container {
  position: relative;
  /* height: 100px; */
  border: 1px solid black;
}
 
.leftCol {
  position: absolute;
    /* position: fixed; */
  top: 0;
  bottom: 0;
  width: 100px;
  background-color: green;
}

.rightCol {
  margin-left: 100px;
  background-color: red;
/*   height: 105%;
  overflow: scroll; */
}