JSFiddle - React, Tailwind, and code Playground

HTML

<header style="background-color: #a4c400;color:#fff;padding:0.25em">
  <label for="toggle">Click to Toggle Nav</label>
</header>
<main style="background-color: #ccc;">
  <input id="toggle" type="checkbox" checked style="display:none"/>
  <nav style="background-color: #8dd0f2;">Nav</nav>
  <article style="background-color:#fff">Article</article>
  <aside style="background-color: #8dd0f2;">Aside</aside>
</main>

CSS

html,body,main,article,nav,aside{height: 97%;box-sizing:border-box}
body{background-color: #ccc;margin: 1.5%;}

main{
  display: flex;
  flex-direction: row;
  flex: 1;
}

article{
  flex: 1;
}

nav,aside{
  /* 12em is the width of the sidebars */
  flex: 0 0 12em;
  transition: transform 0.3s ease
}


/* Checkbox hack to toggle nav visibility */
input ~ nav {
  transform: translateX(-12em);
}
input:checked ~ nav {
  transform: translateX(0); 
}