JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <input type="checkbox" id="toggle">
  <div id="sidebar"></div>
  <label for="toggle"></label>
</div>

CSS

.parent {
  display : flex;
  align-items : center;
}
#toggle {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
#sidebar {
  background: #555;
  width: 150px;
  height: 100vh;
  transition: width 0.5s;
}
label {
  width: 20px;
  height: 50px;
  background: #333;
}
#toggle:checked + #sidebar {
  width: 0px;
}