Prevent inline block from wrapping but allow content to wrap

Question

So far I have this layout:

<ul style="white-space:nowrap;">
    <li style="width:200px; display:inline-block;"></li>
    <li style="display:inline-block; vertical-align:top; padding-left:10px;"></li>
</ul>

I have managed to stop the ul from wrapping which is a start. However, the content in the 2nd li continues off screen. Overlapping its parent elements etc.

I need the 2nd li to take up the slack and be dynamic in width unlike the first li. And I need the text to wrap inside the 2nd li.

Thanks for any help.