Align span inside of div - html

Question

I’m looking for a way to make sure that all label have the same space to the bottom border. (It should look like the image, and not like the fiddle)
JsFiddle
Goal:
My CSS:
.outerDiv {
text-align: center;
/*display: inline-block;*/
float: left;
border-radius: 10px;
border: 2px solid #c3c3c3;
height: 100px;
width: 100px;
margin: 5px;
}
.innerDiv {
width: 80%;
height: 100%;
line-height: 50px;
margin: 0 auto;
}
.errorLabel {
background-color: #a90329;
padding: .2em .6em .3em;
font-size: 100%;
color: #fff;
border-radius: .25em;
line-height: 1;
vertical-align: baseline;
font-weight: 700;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
display: block;
}

Answer 1

Your vertical-align doesn't have any affect due to your display: block.
Try changing vertical-align to "bottom" and display to "inline-block". Then adjust your bottom margin/padding to your desire!
.errorLabel {
background-color: #a90329;
padding: .2em .6em .3em;
font-size: 100%;
color: #fff;
border-radius: .25em;
line-height: 1;
vertical-align: bottom;
font-weight: 700;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
display: inline-block;
margin-bottom: 0.5em;
width: 100%;
}
Edit:
Added width: 100%; to keep the labels the full width.
As #RokoC.Buljan pointed out in the example in the comments, this can be accomplished with cleaner CSS. My example above is just a few small modifications on the OP's original code (in case those classes are used elsewhere too). :)

Answer 2

Absloute positioning would seem the logical choice.
.errorLabel {
background-color: #a90329;
padding: .2em .6em .2em;
font-size: 100%;
color: #fff;
border-radius: .25em;
line-height: 1;
vertical-align: baseline;
font-weight: 700;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
display: block;
position: absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
margin-bottom: 5px;
}
.outerDiv {
text-align: center;
/*display: inline-block;*/
float: left;
border-radius: 10px;
border: 2px solid #c3c3c3;
height: 100px;
width: 100px;
margin: 5px;
}
.innerDiv {
width: 80%;
height: 100%;
line-height: 50px;
margin: 0 auto;
position: relative
}
.errorLabel {
background-color: #a90329;
padding: .2em .6em .2em;
font-size: 100%;
color: #fff;
border-radius: .25em;
line-height: 1;
vertical-align: baseline;
font-weight: 700;
text-align: center;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
display: block;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
margin-bottom: 5px;
}
<div class="outerDiv">
<div class="innerDiv"> <span>123123</span>
<span class="errorLabel">OK</span>
</div>
</div>
<div class="outerDiv">
<div class="innerDiv"> <span>123123</span>
<span class="errorLabel">Error2</span>
</div>
</div>
<div class="outerDiv">
<div class="innerDiv"> <span>123123</span>
<span class="errorLabel">
Line1<br/>
Line2
</span>
</div>
</div>
<div class="outerDiv">
<div class="innerDiv"> <span>123123</span>
<span class="errorLabel">
Line1<br />
Line2
</span>
</div>
</div>

Answer 3

You can fiddle with the bottom amount:
http://jsfiddle.net/z7hL3any/5/
add:
.errorLabel {
position: relative;
}
.innerDiv {
position: absolute;
bottom: 5px;
width: 100%; }

Answer 4

try this
.errorLabel {
background-color: #a90329;
border-radius: 0.25em;
bottom: 0;
box-sizing: border-box;
color: #fff;
display: block;
font-size: 100%;
font-weight: 700;
line-height: 1;
margin-bottom: 10px;
overflow: hidden;
padding: 0.2em 0.6em 0.3em;
position: absolute;
text-align: center;
vertical-align: baseline;
width: 100%;
}
.it should also work