JSFiddle - React, Tailwind, and code Playground

by Ajay Patel

HTML

<div id="outside">
    Outside Outside Outside Outside
    <div id="inside">
        Inside Inside Inside Inside
    </div>
</div>

CSS

#outside {
  position: absolute;
  top: 0;
  left: 0;
  padding: 50px;
  border: 1px solid red;   
}
#inside {
    position: absolute;
    left: 100%;
    padding: 10px;
    border: 1px solid blue;
    
    
  -webkit-transition: all 3s ease-out;  
     -moz-transition: all 3s ease-out;  
      -ms-transition: all 3s ease-out;  
       -o-transition: all 3s ease-out;  
          transition: all 3s ease-out;  

}

#outside:hover #inside { left: 0%; }