JSFiddle - React, Tailwind, and code Playground

HTML

<div id="flexContainer">
    <div id="gridContainer">
          <div id="col1">
          bbb<br><br><br><br>a<br><br><br><br>a<br><br><br><br>a<br><br><br><br>a<br><br><br><br>a<br><br><br><br>a<br><br><br><br>a<br><br><br><br>a<br><br><br><br>a
          </div>
          <div id="col2">
             col2dsad asddasdaa
          </div>
    </div>
</div>

CSS

#flexContainer {
		  display: flex;
      width: 50%;
      margin: auto;
      height: 50vh;
			flex-direction: row;
			align-items: center;
			justify-content: center;
      border: 2px dashed blue;
      }
#gridContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  width: 100%;  
  border: 2px dashed orange;
  
}
#col1 {
  /* overflow: scroll; */
  width: 100%;
  /* height: 100%; */
  background-color: red;
  
}
#col2 {
  background-color: green
}

JavaScript

https://stackoverflow.com/q/43311943/3597276