JSFiddle - React, Tailwind, and code Playground

by Sherbrow

HTML

<div class="d1">
    <p>p1<br />p1<br />p1</p>
</div>
<div class="d2">
    <p>p2<br />p2<br />p2</p>
</div>
<div class="d3">
    <p>p3<br />p3<br />p3</p>
</div>
<div class="d4">
    <p>p4<br />p4<br />p4</p>
</div>

CSS

div { overflow: hidden;height: 30px;position: relative; }

div:hover { overflow: visible; }
div:hover p { position: absolute; }

/* Demo purposes */

div.d1 p { background: #BBF; }
div.d2 p { background: #FBB; }
div.d3 p { background: #FBF; }
div.d4 p { background: #BFB; }

div:hover.d1 p { left: 10px; }
div:hover.d2 p { left: 30px; }
div:hover.d3 p { left: 50px; }
div:hover.d4 p { left: 70px; }

div { margin: 20px;background: #EEE; }
div p { width: 20px; }
div:hover p { z-index: 10; } /* to get above the other divs , so that we see it's redrawn*/

JavaScript

/* Chrome bug */