JSFiddle - React, Tailwind, and code Playground

HTML

<div id="items">

    <div class="item"><div class="inner">text 1<br>text 1<br>text 1</div></div>
<div class="item"><div class="inner">text 2<br>text 2<br>text 2</div></div>
<div class="item"><div class="inner">text 3<br>text 3<br>text 3</div></div>
<div class="item"><div class="inner">text 4<br>text 4<br>text 4</div></div>
<div class="item"><div class="inner">text 5<br>text 5<br>text 5</div></div>
<div class="item"><div class="inner">text 6<br>text 6<br>text 6</div></div>
<div class="item"><div class="inner">text 7<br>text 7<br>text 7</div></div>
<div class="item"><div class="inner">text 8<br>text 8<br>text 8</div></div>
<div class="item"><div class="inner">text 9<br>text 9<br>text 9</div></div>
<div class="item"><div class="inner">text 10<br>text 10<br>text 10</div></div>


</div>

CSS

#items {width:300px;}
.item {width:100px;border:solid 1px #ccc;float:left;height:20px;z-index:0;overflow:hidden;position:relative;}

.item:hover{overflow:visible;z-index:100;}
.item:hover .inner{z-index: 100;}
.inner{position: absolute;
background: white;
width: 100%;
}