JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
		    <div class="box"></div>
		    <div class="box1"></div>
		</div>

SCSS

.col-md-3{
    overflow:hidden;
    margin-top:20px;
}
.box{
    width:100%;
    height:200px;
    background-color:red;
}
.box1{
    width:90%;
    height:200px;
    background-color:blue;
    position:absolute;
    top:200px;
    transition:ease-in-out 1s;
}
.col-md-3:hover .box1{
    top:0px;
}
/*html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 150px;
  height: 150px;
  background-color: red;
  transition: all 1s;
}


.box:hover {
  width: 300px;
  background-color: orange;
}*/