JSFiddle - React, Tailwind, and code Playground

by Jonathan Kutnowski

HTML

<div class="grid">
      <div class="header">Some header stuff
      </div>
      <div class="grid__row">
        <div class="content">1</div>
        <div class="image">
          <img id="pic" src="http://placekitten.com/2000/200">
        </div>
      </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;
}

.content {
  flex-grow: 1;
  padding: 12px;
  border: solid 1px #e7e7e7;
  min-width: 400px;
}

.image {
  flex-shrink: 1;
  padding: 12px;
  border: solid 1px #e7e7e7;
  text-align: center;
}

img {
  overflow: hidden;
  border: solid 1px #e7e7e7;
  max-height: 100%;
  max-width: 100%;
}