JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child">
  
  </div>
</div>

CSS

.parent {
  width: 600px;
  height: 400px;
  background-color: #ffffff;
  position: relative;
}
.child {
  position: absolute;
  right: 0;
  width: 0%;
  height: 100%;
  background-color: #808080;
  
  transition: width .3s ease-out;
  -o-transition: width .3s ease-out;
  -moz-transition: width .3s ease-out;
  -webkit-transition: width .3s ease-out;
}
.child:hover,
.parent:hover .child {
  width: 100%;
}