JSFiddle - React, Tailwind, and code Playground

Image Block Solution A: Float 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>
      Test left 2
         </div>
     <div>
      Test left 2
         </div>
     <div>
      Test left 2
         </div> -->
  </div>
  <div class="rightCol">
    <div>
       Content Body
    </div>
<div>
       Content Body
    </div>
    <div>
       Content Body
    </div>
  </div>
  </div>
  
</body>

CSS

/* solution 1: having left col be an image like content (FLOAT) not taking up whole column */
.leftCol {
  float: left;
  background-color: green;
  width: 100px;
  /* padding: 5px; */
}

.rightCol {
  background-color: red;
 /*  comment out margin left to have content wrap around */
  /* margin-left: 100px; */
}