JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div id="con">
  <div id="inspect">a</div>
  <div id="filtered">
    <div id="list"></div>
    <div id="map"></div>
  </div>
</div>

CSS

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

#con {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  transition: left 0.1s;
}

#con.open {
    left: 50vw;
}

#inspect {
  width: 50vw;
  height: 100vh;
  position: absolute;
  left: -50vw;
  top: 0;
}

#map {
  background: green;
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: auto;
}

#filtered {
    position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: auto;
}

#list {
  background: linear-gradient(to bottom, white 0, white 50%, gray 50%) top left / 100% 2em;

  height: 200vh;
}

JavaScript

con.addEventListener("click", function() {this.classList.toggle("open")}, false)