JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<div><span>This is a text whatever the length</span></div>

CSS

div {
  background-color: grey;
  width: fit-content;
  color: white;
  padding: 2px 5px;
  border-radius: 4px;
}

span {
  transition: max-width 1s ease-out;
  max-width: 0;
  overflow: hidden;
  display: block;
  white-space: nowrap;
}

div:hover span {
  max-width: 200px;
}