JSFiddle - React, Tailwind, and code Playground

by buksy

HTML

<div class="special">
  This is very long text This is very long text This is very long text This is very long text This is very long text This is very long text
</div>


<div class="special-animated">
  This is very long text This is very long text This is very long text This is very long text This is very long text This is very long text
</div>

CSS

.special {
  width: 100px;
  height: 30px;
  overflow: hidden;
  float: left;
}
.special:hover { height: auto; }


.special-animated {
  float: left;
  margin-left: 100px;
  width: 100px;
  max-height: 30px;
  overflow: hidden;
  transition: max-height 2s;
}
.special-animated:hover { max-height: 500px; }