JSFiddle - React, Tailwind, and code Playground

HTML

</br></br></br>

<div class="container-two-div">
    <div class="contain-things back">
        Back
    </div>
    <div class="contain-things front">
        File
    </div>
</div>

CSS

.container-two-div , .contain-things
{
    height:50px;
    max-height:50px;
    min-height:50px;
    overflow:visible;
    background-color:gray;
    width:100px;
}

.front
{
    position:relative;
    top:-50px;
    transition: all 1s; /* transition when the mouse over */
    background-color:red;
    color:white;
}

.container-two-div:hover .front
{
    top:-100px;
}