title: Podium CSS: position elements at the bottom of their div
body: <p>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 <code>position: relative</code> to the father and <code>position: absolute; bottom: 0</code> to the steps, but as I want to display a text just above the steps, I'm having problems positioning this text there.</p>
  
  <p>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 <code>height: 100%</code> property, so the div solution isn't valid.</p>
  
  <p>Here I attach my code snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;
  
  &lt;link rel="import" type="css" href="podium-chart.css"&gt;
  
  &lt;div id="podium-box" class="row" style="height: 400px"&gt;
   &lt;div class="col-md-4 step-container m-0 p-0"&gt;
    &lt;div&gt;
     Text 2
    &lt;/div&gt;
    &lt;div id="second-step" class="bg-blue step centerBoth podium-number"&gt;
     2 
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="col-md-4 step-container m-0 p-0"&gt;
    &lt;div&gt;
     Text 1
    &lt;/div&gt;
    &lt;div id="first-step" class="bg-blue step centerBoth podium-number"&gt;
     1
    &lt;/div&gt;
   &lt;/div&gt;
   &lt;div class="col-md-4 step-container m-0 p-0"&gt;
    &lt;div&gt;
     Text 3
    &lt;/div&gt;
    &lt;div id="third-step" class="bg-blue step centerBoth podium-number"&gt;
     3
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>