JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="left">
    <p>
      Some stuff on the left....
    </p>
  </div>
  <div id="right">
    <h1>
      Title
    </h1>
    <div id="results">
      <div class="result">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" />
      </div>
      <div class="result">
        Result 2
      </div>
      <div class="result">
        Result 3
      </div>
    </div>
  </div>
</div>

CSS

body,
html {
  margin: 0;
  height: 100%;
}

#container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  height: 100%;
}

#left {
  grid-column: 1 / 2;
  background: lightblue;
  height: 100%;
}

#right {
  grid-column: 2 / 3;
  height: 100%;
}

#results {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  height: 100%;
}

img {
  max-height: 100%;
  max-width: 100%;
}