JSFiddle - React, Tailwind, and code Playground

by EoghanM

HTML

<div class="trigger">HoverMe</div>
<div class="expander">
  <div class="outer">
    <div class="inner">
      <div>First Item</div>
      <div>Content</div>
      <div>Content</div>

      <div>Content</div>
      <div>Content</div>
      <div>Content</div>
      <div>ContentContentParticularlyLongContentContentContentParticularlyLongContent</div>
      <div>Content</div>
      <div>Content</div>

      <div>Content</div>
      <div>Content</div>
      <div>Content</div>
    </div>
  </div>
</div>
<div>
  after content</div>
</div>

CSS

body {
  padding: 2em;
}

.trigger {
  font-weight: bold;
}

/* .expander is there for float clearing purposes only */
.expander::after {
  content: '';
  display: table;
  clear: both;
}

.outer {
  float: left; /* purpose: shrink to fit content */
  border: 1px solid green;
  overflow-x: hidden;
  
  width: 100%; /*without this, width will be = to height of content */
}

.inner {
  transition: padding-bottom 0.3s ease-in-out;  /* or whatever crazy transition function you can come up with! */
  padding-bottom: 0%;  /* percentage padding is defined in terms of width. The width at this level is equal to the height of the content */
  height: 0;
  /* unfortunately, change of writing mode has other bad effects like orientation of cursor */
  writing-mode: vertical-rl;
  cursor: default; /* don't want the vertical-text (sideways I-beam) */
  transform: rotate(-90deg) translateX(-100%);  /* undo writing mode */
  transform-origin: 0 0;
  margin: 0;  /* left/right margins here will add to height */
}

.inner > div { white-space: nowrap; }

.expander:hover .inner,
.trigger:hover+.expander .inner {
  padding-bottom: 100%;
}