JSFiddle - React, Tailwind, and code Playground

HTML

<header></header>
<div class="middle">
    <aside>Блоки</aside>
    <main>Контент</main>
 </div>

CSS

html, body {
	height: 100%;
  margin: 0;
}

header {
  background-color: #000;
  height: 50px;
}

.middle {
  background-color: #fff;
  width: 500px;
  height: calc(100% - 50px);
  margin: 0 auto;
  position: relative;
  overflow: hidden; /* overflow: hidden нужен, по этому нельзя ставить display: table */
}

aside {
  background-color: #ff00ff;
  width: 100px;
  height: 100%;
  /*display: table-cell;*/
  display: block;
  float: left;
  vertical-align: top;
}

main {
  background-color: #00ffff;
  width: 400px;
  height: 100%;
   /*display: table-cell;*/
  display: block;
  float: left;
   vertical-align: top;
}