JSFiddle - React, Tailwind, and code Playground

HTML

<div class="panel">
    <div class="outer">
        <div class="inner" style="background-color: red;">
            <div>
                hover
            </div>
            
            <div>                     
                some content
            </div>
        </div>      
    </div>
    <div class="outer">
        <div class="inner" style="background-color: yellow;">
            <div>
                hover
            </div>
            
            <div>                     
                some content
            </div>
        </div>      
    </div>
    <div class="outer">
        <div class="inner" style="background-color: green;">
            <div>
                hover
            </div>
            
            <div>                     
                some content
            </div>
        </div>      
    </div>    
</div>

CSS

.panel {
    height: 100px;
    width: 50px;
    background-color: gray;
}

.outer {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
    height: 24px;
}    

.outer:hover {
    overflow: visible;
    z-index: 1;
}  

.inner:hover {
    position: absolute;
}