Z-index on nested float not working - css

Question

I'm trying to achieve a sliding-door effect on a span contained within an h2 element. The h2 element has position set to relative in order to enable z-index, so far so good.
The span is floated to the right within this h2 element and has a z-index set to lower than the h2's in order to slide under it when the view contracts, but keep sticking out under as if only the 'float' matters here.
But here's what I get instead, followed by what I wish to get:
Current result of z-indexed span within z-indexed h2:
Desired result
CSS for containing H2 element:
width: 400px;
height: 24px;
font-size: 13px;
vertical-align: bottom;
position: relative;
z-index: 5;
padding: 2px;
color: white;
text-align: left;
background: url('left-door.gif') top left no-repeat;
CSS for nested span element:
width: 200px;
height: 100%;
float: right;
z-index: 0;
text-align: center;
background: url('right-door.gif') top right no-repeat;
Anyone knows why the span refuses to sit level with the h2 even though the h2's fixed height ought to cap it within (setting clear: both on the h2 did nothing), and to be obscured by it when the view shrinks? It is because it's nested?
(Also, 'vertical-align' has no effect, the text doesn't settle on text-bottom but sits in vertical middle. Btw, just got started with this tinkering, but happen to be in a hurry. thanks.)
Edit: After BHouwens answer, i tried by reducing the text content of the H2 (real code has text), and the span aligns level, only problem is the z-index doesn't seem to work, but from what I remember from a previous question, z-index doesn't work on nested elements, as in they can't be stacked above or below their parent. Thanks for helping to troubleshoot! This has helped me focus better, and now think I'll just add two spans within the h2!

Answer 1

May be, below code will work for you!
h2 {
width: 400px;
height: 24px;
font-size: 13px;
vertical-align: bottom;
position: relative;
display: table-cell;
z-index: 5;
padding: 2px;
color: white;
background: #ff0;
}
span {
width: 200px;
height: 100%;
right: 0px;
top: 0px;
z-index: 0;
text-align: center;
background: #f00;
position: absolute;
}
span .wrap {
display: table-cell;
height: 24px;
width: inherit;
vertical-align: bottom;
text-align: center;
}
<h2>
H2
<span>
<div class="wrap">Span</div>
</span>
</h2>

Answer 2

Made a fiddle with your code only, which achieves your desired result: https://jsfiddle.net/dzpfkoLy/
My guess is you've got some other CSS acting on these elements (you can inspect with dev tools in Chrome or Firefox to see what this could be). Otherwise, if you want to ensure the result you need, you can set your span to
span {
// other span styling
position: absolute;
right: 0;
top: 0;
}
Which will shunt it to the top right of the h2. You can then play with z-index to get whatever kind of ordering you're after.