Как я могу гарантировать, что два перемещаемых элемента останутся рядом, даже если для них обоих недостаточно ширины?

У меня есть следующий HTML-код:

<div  >
  <div >
    <div style="float: left;">
      <input type="checkbox" value="False" />
    </div>
    <div style="float: left;" >         XXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
  </div>
</div>

Он отображает XXX справа от флажка. Однако, если я уменьшу ширину экрана, XXX окажется под флажком.

Есть ли способ «заблокировать» текст XXX внутри DIV, чтобы XXXX всегда отображался справа и в одной строке?

(Обратите внимание, что я хочу продолжать использовать DIV, так как позже я делаю некоторые вещи jQuery с DIV.)