JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="left">
    <div class="left-one">
      HELLO<br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br> HELLO
      <br>
    </div>
    <div class="left-two">
      <img src="https://i.imgur.com/pSCepJR.jpg">
    </div>
  </div>
  <div class="right">
    <img src="https://i.imgur.com/8UZG4cr.jpg">
  </div>
</div>

CSS

.wrap {
  display: flex;
  justify-content: space-between;
  background: black;
  height: 100vh;
}

.left {
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: yellow;
}

.right {
  flex: 1;
  display: flex;
  background: blue;
}


.left-one {
  flex: 1 0 1px; /* NEW */
  margin-bottom: 10px;
  overflow: auto;
  background: lightgreen;
}

.left-two {
  background: red;
}

.left-two img,
.right img {
  max-width: 100%;
}

body { margin: 0; }