html/css vertically align multiple span

Question

<div class="row history">
    <div class="col col-50 histroy1">
        <span class="my-orders">Numbers</span>
        <span class="my-orders-numbers">13</span>
     </div>
     <div class="col col-50 histroy2">
        <span class="orders-status">In Progress<span>0</span></span>
        <hr />
        <span class="orders-status">Completed<span>13</span></span>
     </div>
</div>

.my-orders{
    font-size: 14px;
    display: block;
}
.my-orders-numbers{
    font-size: 37px;
    color: #F04C3A;
    display: block;
}

I want to vertically align both spans inside history1, so that my-orders span and my-orders-numbers come in the middle of history1 div(my-orders first, then my-orders-numbers, but positioning in middle together). How do I do this?

EDIT: sorry for unclear explanation. I've attached image below.

I want to align vertically both Numbers and 13 to the middle and also want to align vertically 'In Progress' & 'Completed' along with

---

.

Answer 1

You need to add the following CSS to both elements:

display: inline-block;
vertical-align: middle;

http://codepen.io/kevinfarrugia/pen/WRGaLP

Answer 2

You don't give much information but if I understand you correctly, is this what you are looking for?

 .histroy1{ text-align: center; } .my-orders{ font-size: 14px; display: inline-block; vertical-align: middle; } .my-orders-numbers{ font-size: 37px; color: #F04C3A; display: inline-block; vertical-align: middle; }

 <div class="row history"> <div class="col col-50 histroy1"> <span class="my-orders">Numbers</span> <span class="my-orders-numbers">13</span> </div> <div class="col col-50 histroy2"> <span class="orders-status">In Progress<span>0</span></span> <hr /> <span class="orders-status">Completed<span>13</span></span> </div> </div>