JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <div class="header-top-line">
      <div class="wrapper-align">
        <h1><a href="#">LOGOTYPE</a></h1>
      </div>
    </div>
    <div class="header-bottom-line">
      <div class="wrapper-align"></div>
    </div>
  </header>
  <div id="page-content" class="wrapper-align">
    <aside>
      <div id="asside-catalog"></div>
    </aside>
  </div>

CSS

* {
  margin: 0;
  padding: 0;
  outline: none;
}

body {
  font: 100%/1.5em Arial, Helvetica, sans-serif;
  color: #3f3f3f;
}

.wrapper-align {
  width: 96%;
  margin: 0 auto;
}

.header-top-line {
  padding-bottom: 20%;
  background: #4960a2;
}

h1 {
  float: left;
  width: 250px;
}

h1 a {
  display: block;
  text-decoration: none;
  color: #b8c4e6;
  font-size: 1.375em;
}

#page-content {
  margin-top: 25px;
}

#asside-catalog {
  background: #f5f5f5;
  float: left;
  width: 19.054878048780488%; /* 250 / 1312 * 100 */
  height: 600px;
  box-shadow: 0 1px 10px rgba(0,0,0,.2);
}