異なるスタイルのテキストをCSSで同じ幅にする

Question

同じテキストのhtml要素を作成する方法があるのだろうかと思っていましたが、異なるスタイルでは固定幅を与えずに同じ量の領域を占有します。

Here's私が何を話しているのかわかりません。

多少異なるスタイルにもかかわらず、両方のdivが同じ幅になるようにします。テキストを変更することができますので、私はdivを固定幅にすることも、固定したパディングや余白を使ってこれを実現することもできません。何か案は？

HTML：

<div class="normal">Lorem ipsum dolor sit amet.</div><br /> 
<div class="disabled">Lorem ipsum dolor sit amet.</div> 

CSS：

div { 
    padding:5px; 
    display:inline-block; 
    border:1px solid black; 
    background-color:lightgray; 
} 

.normal { 
    font-weight:bolder; 
} 

.disabled { 
    font-weight:lighter; 
    font-style:italic; 
    color:#666666; 
} 

EDIT： 二つの異なるスタイル付きのdiv要素がそのアプリケーションで隣同士になりません。彼らは同じdivです、私はちょうど異なるスタイルが適用されるとき、divのサイズを変更しないことを望みます。ここでは、より良い例です：http://jsfiddle.net/cbargren/4b8KQ/3/

Answer 1

display: inline-blockとdivでそれらをラップし、子div sからdisplay: inline-blockを削除します。

http://jsfiddle.net/thirtydot/4b8KQ/1/

HTML：

<div class="foo"> 
    <div class="normal">Lorem ipsum dolor sit amet.</div> 
    <div class="disabled">Lorem ipsum dolor sit amet.</div> 
</div> 

CSS：

.foo { 
    display: inline-block; 
} 
.foo div { 
    padding:5px; 
    border:1px solid black; 
    background-color:lightgray; 
} 

.normal { 
    font-weight:bolder; 
} 

.disabled { 
    font-weight:lighter; 
    font-style:italic; 
    color:#666666; 
}