Предотвратить смещение содержимого div на следующую строку?

Question

У меня есть div, который выглядит так:

<div>
That's <div id="output"></div>
</div>

«Вывод», который идет во innerHTML этого 2-го div, является одним словом, так что содержимое основного div выглядит как одно из них, в зависимости от того, какой выбор пользователь выбрал в другом месте:

That's right!            
That's good.           
That's close. 

Проблема в том, что мой вывод div не выводится на одной строке. Так это выглядит

That's               
right!

Как я могу сделать так, чтобы содержимое «output» всегда было в одной строке с другим содержимым основного div?

Answer 1

<div>
That's <div id="output" style="display:inline"></div>
</div>

Answer 2

div - это элемент блока, а не встроенный. Вместо этого вы хотите использовать диапазон, поэтому используйте

<span id="output"></span>

Answer 3

Div - это блочный элемент, вместо него используйте span. Или стиль ваших div с помощью float: left