JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body {
position:relative;
}

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

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

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

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