JSFiddle - React, Tailwind, and code Playground

by Nicholas Pappas

HTML

<div id="app">
  <div class="sidenav">
    <div class="sidenav-contents">
      lorem ipsum
    </div>
  </div>
  <div class="appbar"></div>
  <div class="main">
      <button id="doit">
        DO IT!
      </button>
      <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis quis tellus non congue. Quisque justo mi, faucibus ut velit id, vulputate placerat neque. Sed sagittis eleifend sodales. Phasellus et finibus eros. Praesent ut ante eget arcu accumsan scelerisque a eu leo. Sed nec laoreet augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
      </p>
            <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis quis tellus non congue. Quisque justo mi, faucibus ut velit id, vulputate placerat neque. Sed sagittis eleifend sodales. Phasellus et finibus eros. Praesent ut ante eget arcu accumsan scelerisque a eu leo. Sed nec laoreet augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
      </p>
            <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis quis tellus non congue. Quisque justo mi, faucibus ut velit id, vulputate placerat neque. Sed sagittis eleifend sodales. Phasellus et finibus eros. Praesent ut ante eget arcu accumsan scelerisque a eu leo. Sed nec laoreet augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
      </p>
            <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lobortis quis tellus non congue. Quisque justo mi, faucibus ut velit id, vulputate placerat neque. Sed sagittis eleifend sodales. Phasellus et finibus eros. Praesent ut ante eget arcu accumsan scelerisque a eu leo. Sed nec laoreet augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
      </p>
            <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit....

CSS

body {
  margin: 0;
}

#app{
  display: grid;
  grid-template-areas: 'navdrawer appbar inspector' 'navdrawer main inspector';
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 64px 1fr; 
  height: 100vh;
  overflow: hidden;
}

.sidenav {
  background-color: orange;
  grid-area: navdrawer;
}

.sidenav-contents {
  width: 240px;
}

.appbar {
  background-color: green;
  grid-area: appbar;
  /* width: 100%; */
}

.inspector {
  background-color: purple;
  grid-area: inspector;
}

.inspector-contents {
  width: 240px;
}

.main {
  background-color: grey;
  grid-area: main;
  /* height: 100vh; */
  overflow-y: auto;
}

.main-contents {
  /* width: 100%; */
}

JavaScript

document.getElementById("doit").addEventListener('click', function() {
	document.getElementById("inspector-id").style.width = '0px';
});