JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">Header</header>
<main class="main">
  <div class="content">
  <div class="container"><div class="container-in"></div></div>
  </div>
  <aside class="left"></aside>
  <aside class="right"></aside>
</main>

SCSS

*, ::after, ::before {
    box-sizing: border-box;
}

.header {
  height: 60px;
  padding: 15px;
  background-color: #eee;
  margin-bottom: 15px;
}

.header,
.main {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.main {
  display: flex;
  min-height: 200px;
  
  > .content {
    padding: 0 15px;
    width: 65%;
    max-width: 65%;
    order:2;
    flex: 1;
    border-width: 0 1px;
    border-style: solid;
  }
  
  > .left {
    width: 15%;
    min-width: 15%;
    order: 1;
    background-color: #eee;
  }
  
  > .right {
    width: 20%;
    min-width: 10%;
    order: 3;
    background-color: #eee;
  }
}

.container {
  border: 1px solid;
  overflow: hidden;
  
  &-in {
    background-color: red;
    height: 40px;
    width: 700px;
  }
}