JSFiddle - React, Tailwind, and code Playground

Image Block Solution: Flex Stretches Content to Bottom, Widths dependent on content

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

/* Flex Stretches Content to Bottom, Widths dependent on content */

.container {
  display: flex;
  /* height: 100vh; */
  /* align-items: flex-start; */
  border: 1px solid black;
  }
 
.leftCol {
  /* width: 100px; */
  /* flex: 1 1 auto; */
  background-color: green;
}

.rightCol {
  flex: 1 1 auto;
  background-color: red;
}