JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<div>
    <span>
        <a></a>
        <em></em>
    </span>
</div>

CSS

body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix { 
  from { padding: 0; } 
  to { padding: 0; } 
}
div {
    width: 100px; height: 100px;
    margin: 10px;
    border: 1px solid black;
}
span {
    display: block;
    width: 100px; height: 0;
    background: red;
    -webkit-transition: height 1s;
    -moz-transition: height 1s;
    overflow: hidden;
}
div:hover span {
    height: 100px;
}
a {
    display: block;
    height: 20px;
    background: green;
    -webkit-transition: height 1s;
    -moz-transition: height 1s;
}
em {
    display: block;
    height: 0;
    background: yellow;
    -webkit-transition: height 1s;
    -moz-transition: height 1s;
}
a:hover { height: 40px; }
a:hover ~ em { height: 20px; }