JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left_nav_wrapper">

   <div class="sidebar_wrapper">
      <div class="sidebar_header">Header</div>
      <div class="sidebar_content">Content</div>
   </div>
   <div class="sidebar_wrapper">
       <div class="sidebar_header">Header</div>
       <div class="sidebar_content">Content</div>
   </div>

</div>

CSS

.sidebar_wrapper { width: 150px;  }
.sidebar_header { width: 150px; background-color: #F18986; overflow: hidden; }
.sidebar_content { width: 150px; height: 0; background-color: #444; margin-left: -150px;
transition: all 1s linear; -webkit-transition: all 1s linear; }
.sidebar_header:hover + .sidebar_content { height: auto; margin-left: 0px; }