JSFiddle - React, Tailwind, and code Playground

by Vikas

HTML

<div id="container">
  <div class="content">
    <h1>
      this is container A
    </h1>
  </div>
  <div class="content content-b">
    <h1>
      this is container B
    </h1>
    <h1>
      this is container B
    </h1>
    <h1>
      this is container B
    </h1>
    <h1>
      this is container B
    </h1>
    <h1>
      this is container B
    </h1>
    <h1>
      this is container B
    </h1>
  </div>
</div>

CSS

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: flex-start;
  height: 100%;
}

.content {
  border: 1px solid green;
  flex-basis: 45%;
}

.content-b {
  height: 100%;
  overflow: auto;
}