JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="header">Some header stuff
  </div>
  <div class="grid__row">
    <div class="image">
      <img id="pic" src="http://placekitten.com/713/1088">
    </div>
  </div>
  <div class="header">Some header stuff
  </div>
</div>

CSS

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

.header {
  height:50px;
  text-align:center;
}
.grid__row {
  display: flex;
  flex-direction:row;
  border: solid 1px #e7e7e7;
  margin: auto;
}

.content {
  padding: 12px;
  min-width: 400px;
}

.image {
  padding: 12px;
  text-align: center;
  display:flex;
}

img {
  object-fit:contain;
  max-height:100%;
}