place and size button under text with css - html

Question

I have been trying to come around this problem, but I can't find a way to make it work. Therefore I have come here for help.
My idea is that I want to place and size the button under the 99 / 99 text as seen on the image
Image of the html with the code
My html
<div class="btnAttackUpgrade">
<button class="btnUpgrade btnAttackSize" onclick="meleeupgPage();totalClick();"></button>
</div>
<div class="btnRangedUpgrade">
<button class="btnUpgrade btnRangedSize" onclick="btnTest2();totalClick();"></button>
</div>
<div class="btnSlayerUpgrade">
<button class="btnUpgrade btnSlayerSize" onclick="btnTest3();totalClick();"></button>
</div>
My CSS
.btnUpgrade {
position: absolute;
border: 0 none;
outline: none;
}
.btnAttackSize {
width: 31%;
height: 9%;
}
.btnRangedSize {
width: 31%;
height: 9%;
}
.btnSlayerSize {
width: 31%;
height: 9%;
}
div.btnSlayerUpgrade {
position: relative;
top: 67%;
left: 34.5%;
}
div.btnRangedUpgrade {
position: relative;
top: 34%;
left: 1%;
}
div.btnAttackUpgrade{
position: relative;
top: 0.5%;
left: 1%;
}
I know if I remove position: relative; completely from lets say btnSlayerUpgrade it sizes the button as I want, but then it will not stay under the text. It wont be effected by the width and heigth changes. See the picture After I removed position relative
What stop the button from resizing when it has a position to it in css

Answer 1

If understand your question correctly I think the easiest and most responsive way to do this is to put both elements as siblings in a container with display:flex and with centred children.
HTML
<div class="container">
<div class="btnAttackUpgrade"></div>
<button class="btnUpgrade btnAttackSize" onclick="meleeupgPage();totalClick();"></button>
<div>
CSS
.container{
display:flex;
//flex-direction: column; (default)
justify-content:center;
align-items:center;
}
.btnAttackUpgrade{
//unnecessary
}
.btnUpgrade .btnAttackSize{
//unnecessary
}