Запретить перенос встроенного блока, но разрешить перенос содержимого

У меня такой макет:

<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>

Мне удалось остановить ul от обертывания, что является началом. Однако содержимое второго ] li продолжается за пределами экрана, перекрывая его родительские элементы и т. д.

Мне нужен второй li , чтобы компенсировать провисание и быть динамичным по ширине в отличие от первого li . И мне нужно, чтобы текст был заключен во второй li .