как расширить границы класса над другими классами

Question

Мне бы хотелось, чтобы граница вокруг класса друзей расширялась на все расстояние от имени человека до класса добавления друзей.

HTML

<div class = 'friends'> Persons Name</div>
    <div class = 'buttons'> add as friend </div>

CSS

  .friends {  
           border: 1px solid;
           display: inline;
           }
 .buttons  {
           background-color:blue;  
           float: right; 
           width: 50px;
           display: inline;
           }

У меня добавлен jsfiddle , демонстрирующий проблему.

Answer 1

Это решение приходит на ум, если вы можете установить высоту элементов.

Answer 2

Попробуйте сделать это так:

HTML

<div class = 'friends'> Persons Name
    <div class = 'buttons'> add as friend </div>
</div>

CSS

.friends {
         border: 1px solid;
         display: block;
         width: 100%;
         }

.buttons {
         background-color:blue; 
         float: right;  
         display: inline;
         }

Я думаю, чтоэто то, что вы пытаетесь сделать.