JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
      <div class="top_menu">
        some text
      </div>
      <div class='header'>
         menu
      </div>
      <div class="main">
          <div class="left_sidebar">
             left
          </div>
          <div class="content">
             left
          </div>
          <div class="right_sidebar">
             right
          </div>
      </div><!-- main div -->
   </div> <!-- page div -->

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.page {
    height: 100%;
    min-height: 100%;
    background-color: white;
    margin: 0 auto;
    padding: 0;
    width: 1084px;
}
.main {
  width: 1084px;
  height: 100%; // not working
}
.left_sidebar {
  float: left;
  max-width: 197px;
  height: auto;
}
.content {
  width: 517px;
  float: left;
}
.right_sidebar {
  width: 359px;
  float: right;
}