How to wrap lines in an inline-block with CSS?

Question

I have a simple HTML structure (jsfiddle):

Answer 1

There is a very nice flexbox solution if you have the browser support:

/* flexbox additions */

ul li {
  display: flex;
}

.buttons {
  flex-shrink: 0;
}

.owners {
  flex-shrink: 0;
  margin-right: 6px;
}

/* original CSS (inline-block is technically no longer necessary) */

.buttons {
  display: inline-block;
}

.owners {
  display: inline-block;
}

.text {
  display: inline-block;
}

/* the rest is visual styling */

ul li {
  line-height: 1.5em;
  padding: 12px 8px 12px 8px;
  margin-bottom: 12px;
  margin-top: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-size: 15px;
  background-color: #DBEAFF;
  min-height: 23px;
}

.buttons {
  min-width: 13px;
  vertical-align: top;
  margin-top: 3px;
  margin-bottom: -3px;
}

.buttons a {
  padding: 13px 9px 5px 9px;
}

  

    

      
    
    

      Даня Абрамов
    
    
short text
    
  
  

    

      
    
    

      Даня Абрамов
    
    
longer text longer text longer text longer text longer text longer text longer text longer text longer text
    
  
  

    

      
    
    

      Даня Абрамов и Саша Васильев
    
    

      longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text longer text
      longer text longer text longer text longer text longer text longer text
    
  
  

    

      
    
    

      Даня Абрамов и Саша Васильев
    
    

      трали-вали трали-вали трали-вали трали-вали