JSFiddle - React, Tailwind, and code Playground

by alex bollbach

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;
			flexDirection: row;
			alignItems: center;
			justifyContent: center;
}
#gridContainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  width: 100%;
}
#col1 {
  overflow: scroll;
  width: 100%;
  //height: 100%;
  background-color: red;
}
#col2 {
  background-color: green
}