CSS - фиксированная ширина span/div

Я пытаюсь развернуть содержимое для всплывающего диалогового окна, но не имел большой удачи

Я пробовал использовать оба пролета и встроенные divs, но ни один из них, по-видимому, не уважает ширину или минимальную ширину CSS

любые идеи?

Здесь Html

<div id="MessageBox" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 40.8333px; height: auto;" scrolltop="0" scrollleft="0">

<div class="popupKey">Bank Reference</div>
<div class="popupValue"></div>
<br>
<div class="popupKey">Amount</div>
<div class="popupValue">650.00</div>
<br>
<div class="popupKey">Currency</div>
<div class="popupValue">GBP</div>
<br>
<div class="popupKey">PaymentDate</div>
<div class="popupValue">02/06/2011</div>
<br>
<div class="popupKey">Remitter</div>
<div class="popupValue"></div>
<br>
<div class="popupKey">Senders Reference</div>
<div class="popupValue"></div>
<br>
</div>

и CSS

.popupKey
{
    display : inline;
    min-width: 150px;
}

.popupValue
{
    display : inline;
    min-width: 150px;
}

Я хотел бы, чтобы все элементы в столбце popupValue были выровнены

здесь есть JSFiddle:

http://jsfiddle.net/NtK4Y/