CSS trick-- nested span tags where the child needs to below the parent

I have a tricky CSS situation here. Basically I have nested span tags that looks like thi开发者_如何学编程s:

<span>A
  <span>test</span>
</span>
<span>B</span>
<span>C</span>

I need "test" to be below "A" with all three letters (A, B, C) being equal width.

The ideal result would look like this:

ABC
test

What I'm getting now is this:

A   BC
test

Is this possible? I played with float property, but it didn't work because there could be other text before the letter in question:

SOME OTHER TEXT. ABC
                 test

I set up a fiddle here (http://jsfiddle.net/grnbeagle/g3hG8/), and the goal is to reduce the width of highlighted "A". So far I have position:relative and top/left adjustment.

Any suggestion is appreciated.

See this updated fiddle for a working example:

http://jsfiddle.net/g3hG8/4/

Setting the wrapping spans position: relative; and then the child spans position: absolute; achieves the effect you desire.

I think you just want position: absolute;

Demo →

N.B. in order to get the letters to display tightly (as if the markup was <span>ABC</span>) you need to remove all white space from between the tags, as my fiddle does.

<span>H</span><span>i</span><span> </span>
<span style="background:yellow; position: relative;">A<span style="font-size:0.8em; font-weight:bold; position:absolute; top:10px; left: 0;">test</span>
</span><span>B</span><span>C</span>