How to set base line of inline-block element equal to the base line of its last child

How to set base line of inline-block element equal to the base line of its
last child

I have the following HTML:
<div class="horizontal">
<div>A</div>
<div>B</div>
<div class="vertical">
<div>X</div>
<div>Y</div>
</div>
</div>
And the following CSS:
.horizontal > div {
display : inline-block;
}
.vertical > div {
display : block;
}
Currently I have
X
A B Y
But I want to have
A B X
Y
I tried setting vertical-align: text-top, but it doesn't align in exact
way, there are a couple of pixels missing which looks really ugly.
P.S. I have jsfiddle for this: http://jsfiddle.net/Lr8W4/10/