JSFiddle - React, Tailwind, and code Playground

by EoghanM

HTML

<div class="trigger">Hover Me</div>
<div class="outer">
<div class="inner">
<div>Pluto</div>
<div>Ares</div>
<div>Hades</div>
<div>Zargedes</div>
<div>Xargo</div>
</div>
</div>
</div>

CSS

.trigger { font-weight: bold; }

.outer {
  float: left;
  border: 1px solid orange;
  padding-bottom: 0;
  overflow: hidden;
  height: 0;
  transition: padding-bottom 0.3s ease-in-out;
}

.trigger:hover ~ .outer { padding-bottom: 100%; }

.inner {
  float: left;
    writing-mode: vertical-lr;
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: 0 0;
}