JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <header>header</header>
  <main>
    <aside>aside</aside>
    <article>article</article>
  </main>
  <footer>footer</footer>
</div>

CSS

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

* {
  border: 1px green solid;
}

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

main {
  flex: 2;
  display: flex;  
}

aside {
  flex: 1;
}

article {
  flex: 3;
}