JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gato">Miauuu (traducción: "¡que viene el perro!")</div>
<div class="perro">Wof wof <span>(traducción: ¡te pillé!)</span>
</div>

CSS

div.perro {
    position: relative;
    top: 50px;
    transition: top 2s ease-out;
}
span {
    visibility: hidden;
    transition: visibility 0;
}
div.gato:hover + div.perro {
    top: 0;
}
div.gato:hover + div.perro span {
    visibility: visible;
    transition: visibility 0 2s;
}
/* nada importante */
 div {
    padding: 10px;
    background: #dda0dd;
}
div.perro {
    background: #adff2f;
}