Bootstrap 4 bottom fixed but top relative - html

Question

I using backend language php (laravel) and front end html + css;
I make reaction box. Bottom have image for reaction. Top the upper part increases according to the ratio.
I want like this;
https://i.hizliresim.com/YdbYqz.png
But actual;
https://i.hizliresim.com/JV20ao.png
My codes;
https://jsfiddle.net/63yusufsari63/wfh5zexm/
.reaction-box {
text-align: center;
padding: 10px;
}
.reaction-box a {
text-decoration: none;
font-weight: bold;
color: #fc5bb6;
}
.reaction-box a:hover {
opacity: 0.6;
}
.reaction-in-box {
float: left;
width: auto;
}
.reaction-range {
margin: 1px 4px;
background-color: #fc5bb6;
}
.reaction-description {
background-color: #f4f6f6;
padding: 5px;
}
.reaction-description img {
display: block;
width: 50px !important;
height: 50px !important;
margin: 0 auto 5px auto;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<a href="#" title="name" class="reaction-in-box text-center">
<span>Rate</span>
<div class="reaction-range" style="height: 50px; bottom: 0;"></div>
<div class="reaction-description">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-fluid" alt="Name">
Name
</div>
</a>
<a href="#" title="name" class="reaction-in-box text-center">
<span>Rate</span>
<div class="reaction-range" style="height: 20px; bottom: 0;"></div>
<div class="reaction-description">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-fluid" alt="Name">
Name
</div>
</a>
<a href="#" title="name" class="reaction-in-box text-center">
<span>Rate</span>
<div class="reaction-range" style="height: 40px; bottom: 0;"></div>
<div class="reaction-description">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-fluid" alt="Name">
Name
</div>
</a>