JSFiddle - React, Tailwind, and code Playground

by Matias Tucci

HTML

<div id="app">
  <div class="document-reader-root">
    <div class="aside">
       aside
    </div>

    <div class="reader">
       <div class="doc-content">
           A stable economic system requires two components: growth and inclusivity. Economic growth matters because most people want their lives to improve every year. In a zero-sum world, one with no or very little growth, democracy can become antagonistic as people seek to vote money away from each other. What follows from that antagonism is distrust and polarization. In a high-growth world the dogfights can be far fewer, because it’s much easier for everyone to win.
       </div>
    </div>
  </div>
  
  <div class="sidebar">
    sidebar
    <button onclick="toggleHideSidepanels()">
      Toggle hide
    </button>
  </div>
</div>

SCSS

body {
  margin: 0;
  padding: 0;
  height: 100vh;
}

#app {
  display: flex;
  overflow-x: hidden;
  height: 100vh;
}

.document-reader-root {
  overflow-x: hidden;
  display: flex;
  flex: 1 0 80%;
  transition: flex 0.5s ease-in-out;
  flex-direction: row;
}

.aside {
  flex: 1 0 25%;
  background: red;
  transition: flex 0.5s ease-in-out;
}

.reader {
  display: flex;
  background: yellow;
  flex: 1 0 75%;

  .doc-content {
    max-width: 200px;
    padding: 10px 20px;
    background: green;
    margin: 0 auto;
    width: 100%;
    flex: 1;
    overflow-y: auto;
  }
}

.sidebar {
  flex: 1 0 20%;
  background: blue;
}

.hide-panels {
  .aside {
    flex: 1 0 5%;
  }
  
  .document-reader-root {
    flex: 1 0 87%;
  }
}

JavaScript

function toggleHideSidepanels() {
	const appEl =	document.getElementById('app')
	appEl.classList.toggle("hide-panels")
}