JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="left">
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>
    <p>
      left content is long
    </p>

  </div>
  <div class="right">right content is not</div>
</div>

CSS

.wrap {
  height: 100%: overflow: hidden;
  width: 400px;
}

.left {
  float: left;
  width: 50%;
  background: #fafafa;
  text-align: center;
  height: 100%;
}

.right {
  float: right;
  display:flex;
  align-items:center;
  justify-content:center;
  background: white;
  width: 50%;
  text-align: center;
  height: 375px; //make right has the same with left doesn't work
}