JSFiddle - React, Tailwind, and code Playground

HTML

<label for="toggle">
Button
</label>

<input id="toggle" type=checkbox>
<div id="index">
index
</div>

<input id="toggle" type=checkbox>
<div id="content">
content
</div>

CSS

div#index {
  position: fixed;
  float: left;
  width: 10em;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-duration: 1s;
}
div#content{
  width: auto;
  animation-fill-mode: both;
  animation-play-state: paused;
  animation-duration: 1s;
}
@keyframes moveindexleft {
  0% {
    left: 0em;
  }
  100% {
    left: -10em;
  }
}
@keyframes movecontentleft {
  0% {
    margin-left: 10em;
  }
  100% {
    margin-left: 0em;
  }
}
@keyframes moveindexright {
  0% {
    left: -10em;
  }
  100% {
    left: 0em;
  }
}
@keyframes movecontentright {
  0% {
    margin-right: 0em;
  }
  100% {
    margin-left: 10em;
  }
}
input[type=checkbox] {
  display: none;
}
input[type=checkbox]:not(:checked) ~ div#index {
  animation-play-state: running;
  animation-name: moveindexright;
}
input[type=checkbox]:not(:checked) ~ div#content{
  animation-play-state: running;
  animation-name: movecontentright;
}
input[type=checkbox]:checked ~ div#index {
  animation-play-state: running;
  animation-name: moveindexleft;
}
input[type=checkbox]:checked ~ div#content{
  animation-play-state: running;
  animation-name: movecontentleft;
}