JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<div class="easy">
<div class="bottom"> </div>
<div class="top">Other Label</div>
</div>
<button>
<div class="background"> </div>
<div class="label">This is the label</div>
</button>
</div>
CSS
.wrapper{
display: flex;
flex-direction: column;
}
button, .easy{
height: 50px;
width: 100px;
}
.bottom{
height: 100%;
width: 100%;
background-color: purple;
}
.top{
position: relative;
top: -100%;
}
.background{
background-color: green;
height: 100%;
}
.label{
position: relative;
top: -100%;
}