Проблемы с оформлением с помощью ползунка ввода

Question

Пытаясь, чтобы мои выходные данные отображались в соответствии со словами, объясняющими их, прямо сейчас они переносятся на следующую строку, которую я не хочу.

Taco Stands:    Cost per <b><output class="output6">0</output></b> tacos<br>
TacoTaco <output class="output1">0</output>
Los Hermanos Tacos <output class="output2">0</output>
Natcho Taco<output class="output3">0</output>
Taco Bell<output class="output4">0</output>
Chipolte<output class="output5">0</output>

https://jsfiddle.net/xnpqd8cs/

Я также не могу понять, как сделать так, чтобы выходные числа имели запятые для лучшей читаемости.

Answer 1

Это из-за output { display: block; }
Блок будет отображать элементы в виде отдельной строки.Либо удалите это, либо используйте output { display: inline; }:)

Answer 2

Оберните каждую строку с выводом в div и удалите display: block; с выходов.У вас должен быть блок-блок для каждой строки, содержащей текст и выходные данные, которые должны быть разделены так, как вы хотите.

<div>Taco Stands:    Cost per <b><output class="output6">0</output></b> tacos</div>
<div>TacoTaco <output class="output1">0</output></div>
<div>Los Hermanos Tacos <output class="output2">0</output></div>
<div>Natcho Taco<output class="output3">0</output></div>
<div>Taco Bell<output class="output4">0</output></div>
<div>Chipolte<output class="output5">0</output></div>