JSFiddle - React, Tailwind, and code Playground

by vrmtm

HTML

<div class="container">
  <header>W</header>
  <div class="main-and-sidebar-wrapper">
      <section class="main">W</section>
      <aside class="sidebar">W</aside>
  </div>
  <footer>W</footer>
</div>

CSS

.container {
    display: flex;
    flex-direction: column;
}

.main-and-sidebar-wrapper {
    display: flex;
    flex-direction: row;
}

.main {
    flex: 3;
    margin-right: 60px;
}

.sidebar {
   flex: 1;
}