title: Prevent inline block from wrapping but allow content to wrap
body: <p>I have this layout:</p>
  
  <pre><code>&lt;ul style="white-space:nowrap;"&gt;
      &lt;li style="width:200px; display:inline-block;"&gt;&lt;/li&gt;
      &lt;li style="display:inline-block; vertical-align:top; padding-left:10px;"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I have managed to stop the <code>ul</code> from wrapping which is a start. However, the content in the 2nd <code>li</code> continues off screen. Overlapping its parent elements etc.</p>
  
  <p>I need the 2nd <code>li</code> to take up the slack and be dynamic in width unlike the first <code>li</code>. And I need the text to wrap inside the 2nd <code>li</code>.</p>