Currently, part of my dashboard page is styled using the Bulma CSS framework. One feature is a 'Widgets' feature with three large containers displaying key facts such as the number of sales, new customers, etc.
The issue I'm facing is that each 'title' has a different length, causing the figure to be at varying heights. Ideally, I would like the 'figure' to be aligned at the same level across all three DIVS.
Is there a way to align the figures in CSS? Any help would be greatly appreciated!
Here is an 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>