Tengo una situación CSS difícil aquí. Básicamente, he anidado las etiquetas de extensión que se ve así:

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

Necesito que "test" esté debajo de "A" con las tres letras (A, B, C) siendo de igual ancho.

El resultado ideal se vería así:

ABC
test

Lo que obtengo ahora es esto:

A   BC
test

¿Es posible? Yo jugue confloat propiedad, pero no funcionó porque podría haber otro texto antes de la carta en cuestión:

SOME OTHER TEXT. ABC
                 test

Configuré un violín aquí http: //jsfiddle.net/grnbeagle/g3hG8), y el objetivo es reducir el ancho de la "A" resaltada. Hasta ahora tengoposition:relative ytop/left ajuste.

Cualquier sugerencia es apreciada.