Centering vertically text in different divs

Question

I'm currently using the Bulma CSS framework to style part of my dashboard page, one feature is a 'Widgets' feature that has three big containers that show key facts (e.g. the number of sales, new customers etc...).

The problem I'm having is that each 'title' is a different length, forcing the figure to be at a different height, ideally the 'figure' would be at the same level across all three DIVS.

If there's a way to align the figures in CSS that'd be great! Thank you in advance for your help.

Example mockup, achieved by shortening the title:

/* Big Figure DIV for Associate Page */
.tile-title{
  margin-bottom:0 !important;
}

.bigFigure{
  margin: 7.5px auto;
}

.bigFigure p{
  text-align: center;
  font-size: 3rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.css" rel="stylesheet">

<div class="tile is-ancestor">
  <div class="tile is-parent">
    <article class="tile is-child notification is-success">
      <p class="tile-title title is-5">New Customers</p>
      <div class="bigFigure">
        <p>4</p>
      </div>
      <small>You've captured 4 new customers in the last 7 days!</small>
    </article>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification is-warning">
      <p class="tile-title title is-5">New Orders</p>
      <div class="bigFigure">
        <p>0</p>
      </div>
      <small>There haven't been any orders in the last 7 days.</small>
    </article>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification is-danger">
      <p class="tile-title title is-5">Orders that delayed for shipping</p>
      <div class="bigFigure">
        <p>5</p>
      </div>
      <small>There are 5 order(s) that require shipping.</small>
    </article>
  </div>
</div>

Answer 1

To be somehow independent from the headings line number, you can position: absolute; your number and <small> elements and align them from the bottom, e.g.:

.bigFigure {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}

Adjust the bottom value to your needs. 50% should work well with up to 3 rows.

If your footer line number is constant, you can even take a fixed number instead of a percentage.

article.tile {
  padding-bottom: 8em;
}

.tile-title {
  margin-bottom: 0 !important;
}

.bigFigure {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}

.bigFigure p {
  text-align: center;
  font-size: 3rem;
}

.tile>small {
  position: absolute;
  bottom: 1em;
  padding-right: 1em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.css" rel="stylesheet">

<div class="tile is-ancestor">
  <div class="tile is-parent">
    <article class="tile is-child notification is-success">
      <p class="tile-title title is-5">New Customers</p>
      <div class="bigFigure">
        <p>4</p>
      </div>
      <small>You've captured 4 new customers in the last 7 days!</small>
    </article>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification is-warning">
      <p class="tile-title title is-5">New Orders, that are so cool, that I need 3 lines.</p>
      <div class="bigFigure">
        <p>0</p>
      </div>
      <small>There haven't been any orders in the last 7 days.</small>
    </article>
  </div>
  <div class="tile is-parent">
    <article class="tile is-child notification is-danger">
      <p class="tile-title title is-5">Orders that delayed for shipping</p>
      <div class="bigFigure">
        <p>5</p>
      </div>
      <small>There are 5 order(s) that require shipping.</small>
    </article>
  </div>
</div>