position span inline-blocks at the bottom of a div - html

Question

Hello I'm developing a website header with bootstrap 3 which consists of 4 divs.
Each of those 4 divs has 2 nested divs inside.
In the first nested div exist 2 inline block spans, with different fonts and font-sizes.
Imagine one of the 4 initial divs, what I would like to achieve is something this:
___________________________________
| |
| |
| 180,00€ Total |
|---------------------------------|
| for the last 30 days |
| |
|_________________________________|
As you can see inside each of the 4 divs something like the above will exist.
180,00€ and total are 2 span inline-blocks.
I'd like the upper text to be aligned at the bottom and the lower text to be aligned at the top.
You may see a working demo here: JSFIDDLE
HTML:
<div class="row stats-row">
<div class="col-sm-3 col-xs-6 stat"></div>
<div class="col-sm-3 col-xs-6 stat"></div>
<div class="col-sm-3 col-xs-6 stat"></div>
<div class="col-sm-3 col-xs-6 stat">
<div class="data">
<span class="data-num">81,00€</span>
<span class="num-desc">total</span>
</div>
<div class="data-desc">last 30 days</div>
</div>
</div>
CSS:
.row.stats-row {
-webkit-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
-moz-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
background-color: #f9f9f9;
padding: 0px;
margin: 0px !important;
}
.row.stats-row .stat {
border-right: 1px solid #dae3e9;
border-bottom: 1px solid #dae3e9;
height: 80px;
-webkit-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
-moz-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
}
/* EDIT BELLOW */
.stats-row .stat .data{
text-align: center;
height: 50%;
}
.stats-row .stat .data-desc{
text-align:center;
height:50%;
color:#777;
font-style: italic;
font-family: 'Open Sans', sans-serif, Arial;
}
.stats-row .stat .data > span{
display: inline-block;
height:100%;
line-height:100%;
vertical-align: baseline;
}
.stats-row .stat .data .data-num{
margin-right:20px;
color: #32a0ee;
font-size: 25px;
}
.stats-row .stat .data .num-desc{
color: #29323a;
font-weight: bold;
font-size: 16px;
}
#monthGraphs .portlet-header h3{
text-align:center;
}
.graph{
width:100%;
}

Answer 1

Added spans in he .data-desc section and managed this
JSFiddle Demo
Adjusted HTML section
<div class="data-desc"><span>over the last</span><span>30 days</span></div>
CSS
#import url('//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css');
.row.stats-row {
-webkit-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
-moz-box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
box-shadow: 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
background-color: #f9f9f9;
padding: 0px;
margin: 0px !important;
}
.row.stats-row .stat {
border-right: 1px solid #dae3e9;
border-bottom: 1px solid #dae3e9;
height: 80px;
-webkit-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
-moz-box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
box-shadow: inset 0px 0px 1px 0px rgba(218, 227, 233, 0.5);
}
/* EDIT BELLOW */
.stats-row .stat .data{
height: 50%;
}
.stats-row .stat .data-desc span{
height:50%;
color:#777;
font-style: italic;
font-family: 'Open Sans', sans-serif, Arial;
}
.stats-row .stat .data > span{
//display: inline-block;
height:100%;
line-height:100%;
vertical-align: bottom;
}
.stats-row .stat .data .data-num{
color: #32a0ee;
font-size: 25px;
}
.stats-row .stat .data .num-desc{
color: #29323a;
font-weight: bold;
font-size: 16px;
}
/* EDIT BELLOW */
.stats-row .stat .data{
overflow: hidden; /* quick clearfix */
}
.data span,
.data-desc span{
width:50%;
float:left;
text-align:center;
}
.data span:last-child,
.data-desc span:last-child{
text-align:left;
padding-left:16px;
}
Adding classes to the spans would avoid the need to use last-child and the line-heights could use tweaking. Frankly, it might just be easier to use a table. :)

Answer 2

if i understand the question right. try adding this at the bottom of your css
.data-num{
padding-top:15px;
}