How to avoid line break with `inline-block` elements

Question

With the following code,

CSS

.inline{display: inline-block;}

HTML

<div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
  X&nbsp;<div class="inline">Foo</div>
</div>

I intend to avoid line break at   (between an "X" and the following div item with "Foo") (but allow line break between a div item with "Foo" and the following "X").

As this demo shows, line break can actually happen. Why is that?

How can I avoid line break in such case?

Answer 1

    <style>
.inline{display: list-item;}

</style>

<div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
  X &nbsp;<div class="inline">Foo</div>
</div>



<div>
  <div class="inline">X &nbsp;Foo</div>
  <div class="inline">X &nbsp;Foo</div>
  <div class="inline">X &nbsp;Foo</div>
  <div class="inline">X &nbsp;Foo</div>
  <div class="inline">X &nbsp;Foo</div>
  <div class="inline">X &nbsp;Foo</div>
  <div class="inline">X &nbsp;Foo</div>
</div>

You can use Like this and its working for me