Выравнивание пролета с равным заполнением

Question

У меня ниже HTML и CSS, здесь span выровнен влево. Здесь padding-right изменяется в зависимости от размера текста span. Есть ли способ, когда в отступе находится одна и та же строка, не зависящая от размера текста span.

.chapter { 
 
    margin-left: 5.0em; 
 
    margin-right: 0.2em; 
 
} 
 
.para { 
 
    text-indent: 0em; 
 
    margin-top: 0.85em; 
 
} 
 
.para span.phrase { 
 
    text-indent: 0em; 
 
    margin-left: -4.75em; 
 
    font-weight: bold; 
 
    padding-right: 2.8em; 
 
}

<div class="chapter"> 
 
    <div class="para"> 
 
<span class="phrase">8.04</span>The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div> 
 
    <div class="para"><span class="phrase">8A.03</span> 
 
The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div> 
 
    <div class="para"><span class="phrase">8AA.01</span>The padding shorthand property sets all the padding properties in one declaration. This property can have from one to four values</div> 
 
</div>

Благодаря

Answer 1

Просто добавьте position:absolute; к вашему .para span.phrase

JSFiddle

Answer 2

Вы должны иметь макет таблицы, чтобы быть в состоянии достигнуть вашего Requ стандартное восточное время. Вместо использования реального <table> вы можете использовать display table.

В основном вам нужно будет использовать display: table; с для каждой строки, display: table-row; и каждый столбец (<span>) будет display: table-cell;.

Теперь ваш текст может быть динамическим без жесткого кодирования размера первого столбца в CSS.

Пример можно найти здесь: http://jsfiddle.net/r5a1sqzd/1/