how to extend the border of a class over other classes

Question

I would like the border around the friends class to extend the whole distance from the persons name to the add friends class.

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;
           }

I have added a jsfiddle demonstrating the problem.

Answer 1

Try doing it like this:

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;
         }

I think that it what you are trying to do.