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');
$deleteButtons = '<span class="pull-right"><button class="btn btn-xs btn-danger delete_buttons"  ><span class="glyphicon glyphicon-trash" style="color:E12121"></span></button></span>';
 
               
 $listPoints.append($('<a class="list-group-item clearfix">')
                                                                       // .attr("href",value._id.$oid)
                                                                       .text(value.name)
                                                                       .data({'latitude':value.latitude,'longitude':value.longitude,'name':value.name})
                                                                       .append($deleteButtons)
                                                                       .data("id",value._id.$oid))

 
   $('.delete_buttons').on('click', function(e){
            e.stopPropagation();
            e.preventDefault();
 
            alert('ok');
        })   
    
    
})