Align multiple span's to bottom of footer

Question

Seems like a simple task but I just can't figure it out. I have several spans inside my footer and I want them aligned to the bottom.

I've tried adding vertical-align:bottom and bottom:0 but no luck.

<footer>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</footer>

It's important that they are spans!

Below is the css and here's a fiddle.

footer {
    width:100%;
    height:30px;
    background-color:#555;
}
span {
    border-left:1px solid #DDD;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:50%;
    display:block;
    float:left;
    width:25%;
}

EDIT
I wasn't clear enough. I want the span's within the footer to align to the bottom. This is what I have now:

And this is what I want:

Answer 1

Based on your comment "no margin, no padding" the only way I see is wrapping your spans into a div and position that div as your needs.

HTML

<footer>
    <div>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
    </div>
</footer>

CSS

footer {
    width:100%;
    height:30px;
    background-color:#555;
    position: relative;
}
div{
    position: absolute;
    bottom: 0;
    height:50%;
    width: 100%;
}
span {
    border-left:1px solid #DDD;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:100%;
    display:block;
    float:left;
    width:25%;
    background-color:#777;
 }

Fiddle

Answer 2

If I have understood your question correctly then here is the Fiddle for that:

Working Example

footer {
width:100%;
height:30px;
background-color:#555;
bottom:0px;
position:absolute;
}
span {

border-left:1px solid #DDD;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:50%;
display:block;
float:left;
width:25%;
}

Hope this helps.

Answer 3

this is what you need

DEMO

footer {
    width:100%;
    height:30px;
    background-color:#555;
    position:absolute;

}
span {
    border-left:1px solid #DDD;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height:20px;
    display:block;
    float:left;
    width:25%;
    background-color:#777;
    position:relative;
    margin-top:10px;

}