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;
}

.sidebar_content {
display:none;
width:150px;
margin-left:-150px;
background-color:#444;
opacity:0;
}

.sidebar_header:hover + .sidebar_content 
{
    display: block;
    animation: fadein 2s;  
    -webkit-animation: fadein 2s;   
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
}

@-webkit-keyframes fadein
{  
   from   {opacity:0;}
   to {opacity:1;margin-left:0;}
}

@keyframes fadein
{  
   from   {opacity:0;}
   to {opacity:1;margin-left:0;}
}