Podium CSS: position elements at the bottom of their div - html

Question

I'm trying to create a podium using CSS and HTML. I have achieved to positionate the steps of the podium at the bottom by adding position: relative to the father and position: absolute; bottom: 0 to the steps, but as I want to display a text just above the steps, I'm having problems positioning this text there.
My first aproach was to put the text and the step on a div and positioning absolutely this div, but as the steps get their height by a percentage of their father the father needs to have a height: 100% property, so the div solution isn't valid.
Here I attach my code snippet:
#font-face {
font-family: DaggerSquare;
src: url("fonts/podium-font.woff") format("woff"), url("fonts/podium-font.ttf") format("truetype");
}
#podium-box {
width: 100%;
margin: 0 auto;
}
.podium-number {
font-family: DaggerSquare;
font-weight: bold;
font-size: 4em;
color: white;
}
.step-container {
width: 100%;
position: relative;
}
.step {
width: 100%;
position: absolute;
bottom: 0;
}
.bg-blue {
background-color: #063b65;
}
#first-step {
height: 50%;
}
#second-step {
height: 35%;
}
#third-step {
height: 30%;
}
.centerBoth {
display: flex;
justify-content: center;
align-items: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="import" type="css" href="podium-chart.css">
<div id="podium-box" class="row" style="height: 400px">
<div class="col-md-4 step-container m-0 p-0">
<div>
Text 2
</div>
<div id="second-step" class="bg-blue step centerBoth podium-number">
2
</div>
</div>
<div class="col-md-4 step-container m-0 p-0">
<div>
Text 1
</div>
<div id="first-step" class="bg-blue step centerBoth podium-number">
1
</div>
</div>
<div class="col-md-4 step-container m-0 p-0">
<div>
Text 3
</div>
<div id="third-step" class="bg-blue step centerBoth podium-number">
3
</div>
</div>
</div>

Answer 1

No need to use position:absolute just use flexbox and flex-columns.
Then push the text div to the bottom.
#font-face {
font-family: DaggerSquare;
src: url("fonts/podium-font.woff") format("woff"), url("fonts/podium-font.ttf") format("truetype");
}
#podium-box {
margin: 0 auto;
display: flex;
}
.podium-number {
font-family: DaggerSquare;
font-weight: bold;
font-size: 4em;
color: white;
}
.step-container {
flex: 1;
display: flex;
flex-direction: column;
}
.step-container>div:first-child {
margin-top: auto;
text-align: center;
}
.step {
text-align: center;
}
.bg-blue {
background-color: #063b65;
}
#first-step {
height: 50%;
}
#second-step {
height: 35%;
}
#third-step {
height: 30%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="import" type="css" href="podium-chart.css">
<div id="podium-box" class="row" style="height: 300px">
<div class="col-md-4 step-container m-0 p-0">
<div>
Text 2
</div>
<div id="second-step" class="bg-blue step centerBoth podium-number">
2
</div>
</div>
<div class="col-md-4 step-container m-0 p-0">
<div>
Text 1
</div>
<div id="first-step" class="bg-blue step centerBoth podium-number">
1
</div>
</div>
<div class="col-md-4 step-container m-0 p-0">
<div>
Text 3
</div>
<div id="third-step" class="bg-blue step centerBoth podium-number">
3
</div>
</div>
</div>

Answer 2

As has already been pointed out, you could probably start from scratch and structure this a bit better. But if you want to keep as is then just give the divs that contain the text a class and give them the following attributes:
position:absolute;
bottom:70px;