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>
        <span id="pic"></span>
      </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;
   position: relative;
}

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

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

#pic {
       background: url('http://lorempixel.com/400/200/sports/1/') no-repeat;
       background-size: cover;
       position: absolute; 
       left: 440px; 
       right: 0; 
       top: 0; 
       bottom: 0; 
     }