JSFiddle - React, Tailwind, and code Playground

HTML

<div class="base">
  <div class="header">HEADER</div>
  <div class="logo">LOGO</div>
  <div class="content">CONTENT</div>
</div>

CSS

html, body {
  height: 100%;
}

.base { 
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  min-height: 100%;
  background: blue;
}

.header {
  flex-grow: 1;
  flex-basis: 100%;
  height: 30px;
  background: yellow;
}

.logo {
  flex-grow: 1;
  flex-basis: 100%;
  height: 50px;
  background: orange;
}

.content {
  flex-grow: 1;
  flex-basis: 100%;
  align-self: center; /* <<< DOESN"T SEEM TO WORK */
  background: green;
}