JSFiddle - React, Tailwind, and code Playground

HTML

<div class="item_wrap">
    <div class="item">
        <button>button</button>
    </div>
    <div class="item_sec"></div>
</div>

CSS

.item_wrap{
    position: relative;
    height: 150px;
    width: 300px;
}

.item {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  background-color: red;
  z-index:1;
}

.item > button{
    display: none;
}
.item:hover{
    height: 150px;
}
.item:hover > button{
    display: block;
  
}

.item_sec {
  position: absolute;
  width: 100%;
  height: 50px;
  bottom:0;
  z-index:0;
  background-color: green;
}