border-botton у div сверху

Вот смотрите, http://jsfiddle.net/mgpv8qvt/1/ почему подчеркивание идет над строкой а не под?

Хотелось бы сделать линию под дивом не задавая высоту - просто класс dest иногда будет идти в несколько строк, и если задать высоту, то всё будет сбиваться

<div class="obs">
    <span class="dest">Приемная (справочная)</span>
    <span class="phone">8-812-111-11-11</span>
</div>
    <div class="line"></div>

    .obs{
margin: 20px 0 0 0;
}
.dest{
    float: left;
    font-size: 16px;
    font-family: "PF BeauSans Pro",sans-serif;
    color: #666666;
}
.phone{
    float: right;
    font-size: 18px;
    font-family: "PF BeauSans Pro",sans-serif;
    color: #000;
    font-weight: bold;
    text-decoration: underline;
}
.line{
    border-bottom: 1px dashed #000;
}

UPDATE http://jsfiddle.net/mgpv8qvt/2/ можно сделать так, но почему тогда текст не выравнивается?