<div class="row history">
<div class="col col-50 histroy1">
<span class="my-orders">Statistics</span>
<span class="my-orders-numbers">27</span>
</div>
<div class="col col-50 histroy2">
<span class="orders-status">In Transit<span>4</span></span>
<hr />
<span class="orders-status">Delivered<span>23</span></span>
</div>
</div>
.my-orders{
font-size: 14px;
display: block;
}
.my-orders-numbers{
font-size: 37px;
color: #F04C3A;
display: block;
}
I am looking to vertically center both the 'Statistics' and '27' spans within the history1 div. How can I achieve this so that both elements align in the middle of the div, with 'Statistics' appearing above '27'? Thank you for your assistance.
UPDATE: Apologies for any confusion in my previous explanation. Here is an image for reference: https://i.stack.imgur.com/zeSxo.png
My goal is to vertically align both 'Numbers' and '13', while also vertically aligning 'In Progress' and 'Completed' texts alongside the horizontal line (
). Any tips on how to accomplish this would be greatly appreciated.