JSFiddle - React, Tailwind, and code Playground

HTML

<dl>
    <dt><a href="#diniMueter">Dini mueter</a></dt>
    <dd id="diniMueter">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim velit vel tellus scelerisque ultrices. Sed commodo dui at eros pulvinar convallis. Maecenas ipsum eros, imperdiet porta bibendum sed, mattis in purus. Cras eleifend semper ante, eget aliquet erat tristique nec. </dd>
    <dt><a href="#diniGrosMueter">Dis Grosi</a></dt>
    <dd id="diniGrosMueter">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim velit vel tellus scelerisque ultrices. Sed commodo dui at eros pulvinar convallis. Maecenas ipsum eros, imperdiet porta bibendum sed, mattis in purus. Cras eleifend semper ante, eget aliquet erat tristique nec. </dd>
    <dt><a href="#diniUrgrosMueter">Dis Urgrosi</a></dt>
    <dd id="diniUrgrosMueter">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim velit vel tellus scelerisque ultrices. Sed commodo dui at eros pulvinar convallis. Maecenas ipsum eros, imperdiet porta bibendum sed, mattis in purus. Cras eleifend semper ante, eget aliquet erat tristique nec. </dd>
</dl>

CSS

* {margin:0;padding:0}
body {background:grey;}

dl {background:white;height:200px}

dl > * {float:left;width:50px;height:100%;overflow:hidden;position:relative}

dt a {position:absolute;left:0;top:0;right:-150px;bottom:0;background:pink;padding:12px;-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);transform:rotate(270deg)}

dd {width:0;-webkit-transition:width 300ms ease}

dd:target {width:200px}