JSFiddle - React, Tailwind, and code Playground

by EoghanM

HTML

<div class="outer" style="
    float: left;
">
<div class="inner" style="
    
">
<ul style="
    writing-mode: vertical-lr;
    /* padding-bottom: 17%; */
    /* height: 0; */
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: 0 0;
    padding: 0;
    margin: 0;
">
<li>ContentContent</li><li>Content</li><li>Content</li>

<li>Content</li>
<li>Content</li>
<li>Content</li><li>ContentContent</li><li>Content</li><li>Content</li>

<li>Content</li>
<li>Content</li>
<li>Content</li>
</ul>
</div>
</div>

CSS

.outer { border: 1px solid green; transform: rotate(90deg);  }
.inner { float: left;
    padding-bottom: 100%;
    height: 0;
    transition: padding-bottom 0.3s ease-in-out;}