title: How to wrap lines in an inline-block with CSS?
body: <p>I have a simple HTML structure (<strong><a href="http://jsfiddle.net/tWW8V/" rel="noreferrer">jsfiddle</a></strong>):</p>
  
  <pre><code>&lt;li&gt;
      &lt;div class="buttons"&gt;
          &lt;a href="done"&gt;&lt;img src="done.png"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="owners"&gt;
          Даня Абрамов и Саша Васильев
      &lt;/div&gt;
      &lt;div class="text"&gt;
          трали-вали трали-вали трали-вали трали-вали
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><code>buttons</code>, <code>owners</code> and <code>text</code> have <code>display: inline-block</code>.</p>
  
  <p>This looks fine when <code>text</code> is fairly small:</p>
  
  <p><img src="https://i.stack.imgur.com/Cg5LB.png" alt="enter image description here"></p>
  
  <p>However, as the text grows, <code>inline-block</code> elements extend and eventually fall over the line:</p>
  
  <p><img src="https://i.stack.imgur.com/77I6K.png" alt="enter image description here"></p>
  
  <p>This is ugly, and I would like to avoid that.<br>
  What I want to achieve instead is this:</p>
  
  <p><img src="https://i.stack.imgur.com/18fOS.png" alt="enter image description here"></p>
  
  <p>When the text is too large to fit inside the element, I want it to be wrapped by lines.<br>
  I tried setting <code>float: left</code> on the elements, but couldn't get it working.</p>
  
  <p>What's the proper way to do this with HTML and CSS (no tables)?</p>