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

Question

In a Bootstrap 3 list-group-item, I have an icon, some text, and two icons / buttons that should float right.

I tried this:

Answer 1

To keep the buttons aligned wrap a new element around them and float the wrapping element. Then clear the float on list items with the .clearfix class to fix their height.

  
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    
      CCS
      
        
      
    
  

See live example here: http://jsfiddle.net/cdog/EpG7x/.

However, placing buttons within a link is not valid according to the HTML5 specification from W3C.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

A similar result can be achieved using panels with tables instead.

  

    

      

        

          
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        
        

          CCS
          
            
          
        
      
    
  

To prevent content inside a cell from wrapping, you can use the .text-nowrap class (added in Bootstrap v3.2.0).

See live example here: http://jsfiddle.net/cdog/6mFDH/.