JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexer">
  <div>
     test
  </div>
  <div class="extra">
    extra
  </div>
</div>

CSS

.flexer {
  display: inline-flex;
  border: 1px solid red;
}
.extra {
  flex: 0 1 0%;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
  width: 0;
}
.flexer:hover .extra {
  flex-grow: 1;
  width: auto;
}