agregar fracciones en css

Estoy tratando de agregar fracciones usando CSS

.top{border-bottom:solid black 1px; display:inline-block; float:left} .bottom{ display:inline-block; clear:left; float:left} 

para que aparezcan en el formato:

 1 - x 

http://jsfiddle.net/KVDS5/78/ funciona, pero cuando trato de agregar números a la ecuación en los lados simplemente se mueve hacia el lado izquierdo, ¿cómo puedo establecer el CSS para que no afecte el orden de la ecuación? ?

HTML:

  1 6  

CSS:

 .fraction { display: inline-block; text-align: center; } .fraction, .top, .bottom { padding-left: 2px; padding-right: 2px; font-size: 11px; } .bottom { border-top: 1px solid black; display: block; } 

Así es como lo hice. Demostración: http://jsfiddle.net/MarkkNijboer/yQm72/1/