JSFiddle - React, Tailwind, and code Playground

HTML

<div class="hpBox">
    <span>Title Here</span>
    <p>Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. </p>
    </div>

<div class="hpBox hpBox2">
    <span>Title Here2</span>
    <p>Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. </p>
    </div>

CSS

.hpBox {
    display: inline-block;
    padding: 10px;
    background: red;
    -webkit-transition: 1s linear;
    transition: 1s linear;
    max-width:200px;
    max-height:22px;
    position:absolute;
}
.hpBox p {
  max-height: 0;
  max-width: 0;
  overflow: hidden;
  -webkit-transition: 2s linear;
  transition: 2s linear;
}
.hpBox:hover {
    max-width:400px;
    max-height:200px;
}
.hpBox:hover p {
  max-height: 200px;
  max-width: 400px;
}
.hpBox2 {
  /*left:60%;
  top:250px;*/
    right: 35%;
    bottom: -121px;
}