JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="outer">
  <div class="left">
    <div class="left_inner">
      <div class="item">one</div>
      <div class="item">two</div>
      <div class="item">three</div>
      <div class="item">four</div>      
    </div>
  </div>
  <div class="main">
    <div class="main_inner">
      <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum minus numquam possimus, modi veniam eligendi omnis ipsam architecto sunt a voluptate, molestias provident corporis aperiam doloribus necessitatibus. Dolore fuga, necessitatibus.</div>
      <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum minus numquam possimus, modi veniam eligendi omnis ipsam architecto sunt a voluptate, molestias provident corporis aperiam doloribus necessitatibus. Dolore fuga, necessitatibus.</div>
      <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum minus numquam possimus, modi veniam eligendi omnis ipsam architecto sunt a voluptate, molestias provident corporis aperiam doloribus necessitatibus. Dolore fuga, necessitatibus.</div>
      <div class="block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum minus numquam possimus, modi veniam eligendi omnis ipsam architecto sunt a voluptate, molestias provident corporis aperiam doloribus necessitatibus. Dolore fuga, necessitatibus.</div>         
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.outer {
  display: table;
}

.left {
  background-color: black;
  width: 200px;
  position: relative;
  display: table-cell;
  color: white;
}

.main {
  background-color: white;
  max-width: 400px;
  position: relative;
  display: table-cell;
  transition: .3s ease-out;
}

.main.close {
  left: -200px;
  transition: .3s ease-out;
}

.left_inner, .main_inner {
  display: table-cell;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 20px;
  padding-right: 20px;
}

JavaScript

$('.main, .left').on('click', function() {
	$('.main').toggleClass('close');
});