JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
      <div class="header">Some header stuff
      </div>
      <div class="grid__row">
        <div class="grid__item">1</div>
        <img id="pic" src="img/clouds.png">
      </div>
    </div>

CSS

.grid {
  border: solid 1px #e7e7e7;
  height:95vh;
  display: flex;
  flex-direction: column;
}

.header {
  flex: 0;
}

.grid__row {
  flex: 1;
  display: flex;
  flex-direction:row;
}

.grid__item {
  flex: 1;
  padding: 12px;
  border: solid 1px #e7e7e7;
}

img {
  flex: 1;
  object-fit:contain;
  overflow:hidden;
  border: solid 1px #e7e7e7;
}