Bootstrap 3: Span elements floating right in list-group-item do not consume vertical space

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container" id="foo">
  <div class="list-group">
    <a href="#" class="list-group-item clearfix">
      <span class="glyphicon glyphicon-file"></span>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      <span class="pull-right">
        <button class="btn btn-xs btn-info">CCS</button>
        <button class="btn btn-xs btn-warning">
          <span class="glyphicon glyphicon-trash"></span>
        </button>
      </span>
    </a>
  </div>
</div>

JavaScript

$( function(){
   var value={latitude:65465,longitude:98765,name:"Paris",_id:{$oid:"http://www.google.fr"}};
    
    $listPoints=$('#foo');
    $buttons='<span class="pull-right"><button class="btn btn-xs btn-info">CCS</button><button class="btn btn-xs btn-warning  deletebutton"><span class="glyphicon glyphicon-trash"></span></button></span>';
    
    $listPoints.append($('<a class="list-group-item">').attr("href",value._id.$oid)
                                                        .text(value.name)
                                                       .data({'latitude':value.latitude,'longitude':value.longitude,'name':value.name}).append($buttons)) 
                       
 $('.deletebutton').on('click', function(e){
e.stopPropagation();
e.preventDefault();
     alert('ok');
 })                      
    
    
    
})