JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    раз
        <div class="blok">два</div>
    </div>

CSS

.wrap{
width:200px;
height:100px;
border-radius:5px;
background:#ccc;
position:relative;
border:2px solid transparent;
}

.wrap:hover{
border:2px solid red;
border-radius:5px 5px 5px 0px;
}

.wrap:hover .blok{
display:block;
}

.blok{
display:none;
width:100px;
height:100px;
position:absolute;
background:#ccc;
top:100px;
left:-2px;
border-radius:0px 0px 5px 5px;
border:2px solid red;
border-top:none;
}