JSFiddle - React, Tailwind, and code Playground

HTML

<section class="some-area fill-height-or-more">
  <div>
      <h1>LEFT</h1>

  </div>
  <div>
      <h2>Two</h2>
      <p>This Column should</p>
      <p>only be as width as</p>
      <p>its content.</p>
  </div>
  <div>
      <h2>RIGHT</h2>
  </div>
</section>

CSS

.fill-height-or-more {
  min-height: 100%;
  display: flex;
}
.fill-height-or-more > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items : center;
}

.some-area > div {
  padding: 1rem;
}
.some-area > div:nth-child(1) {
  background: #88cc66;
}
.some-area > div:nth-child(2) {
  background: #79b5d2;
  flex: 0
}
.some-area > div:nth-child(3) {
  background: #8cbfd9;
}
.some-area > div h1, .some-area > div h2 {
  margin: 0 0 0.2rem 0;
}
.some-area > div p {
  margin: 0;
}

html, body {
  height: 100%;
}