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

Question

I have a simple HTML structure (jsfiddle):

Answer 1

I think you need to set max-width with different display mode.

li {overflow:hidden;}
li div { float:left; }
.button{ max-width: 10%;}
.owners{ max-width: 20%;}
.text{ max-width: 70%;}

See the new result here

BTW, if you use inline-block, the owners part won't stay on top.

I modified the code to fit your requirement. :)

FYI, li {overflow:hidden;} is a way to make a container to encompass its floated children.