Pinning icons to top of the vertical flexbox bar - html

Question

I have 3 vertical flexbox bars with different height and I'd like to place 3 different icons on the top of 3 vertical bars.
I tried by using margin and padding to fix the icons at the top of the flexbox but when i switch the window to responsive mode then again icons moves to different places.
Here is an image of how i wanted:
Here's an image of how i am getting like:
My HTML Code:
<div>
<div className="prize">
<div class="prizeimage2">
<img src={prizeTwo} alt="2ndprizeicon"/>
</div>
<div class="prizeimage1">
<img src={prizeOne} alt="1stprizeicon"/>
</div>
<div class="prizeimage3">
<img src={prizeThree} alt="3rdprizeicon"/>
</div>
</div>
<div className="container">
<div class="item item1">
<p className="hourstext">28<br></br> hrs</p>
</div>
<div class="item item2">
<p className="hourstext">25<br></br> hrs</p>
</div>
<div class="item item3">
<p className="hourstext">30<br></br> hrs</p>
</div>
</div>
</div>
CSS:
.container {
position: absolute;
width: 100%;
height: 70%;
left: 0px;
top: 0px;
display: flex;
justify-content: center;
align-items: flex-end;
background: #162983;
}
.prize{
position: relative;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
z-index: 1;
}
.item {
width: 75px;
background: #8C9CE7;
}
.item1 {
height: 35%;
margin-left: 2px;
}
.item2 {
height: 45%;
margin-left: 9px;
}
.item3 {
height: 20%;
margin-left: 10px;
}
.prizeimage1 {
padding-bottom: 5%;
}
.prizeimage2 {
padding-top: 45px;
}
.prizeimage3 {
padding-top: 190px;
}