Как я могу получить несколько индикаторов выполнения с разными идентификаторами на одной строке?

Question

У меня есть индикатор выполнения Bootstrap, который отображает уровень мастерства пользователя (в основном, правильные ответы при попытках).Тем не менее, я хотел бы раскрасить разницу двумя полосами, одна с надписью «bg-success», а другая с надписью «bg-warning», чтобы сделать контраст более заметным.Я сделал это с помощью индикаторов выполнения с разными идентификаторами.Проблема в том, что индикаторы выполнения не будут отображаться в одной строке.

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

Вот соответствующий JavaScript:

function setBars() {
  var profPerc = Number(((myProg[1] / myProg[2]) * 100).toFixed(csvSize.toString().length));
  document.getElementById("profBar").innerHTML = "<strong>" + profPerc.toString() + "</strong>";
  document.getElementById("profBar").style.width = profPerc + "%";
  document.getElementById("offBar").innerHTML = "<strong>&nbsp;</strong>";
  document.getElementById("offBar").style.width = (100 - profPerc) + "%";
}

// There are no errors with any of the other above-mentioned variables.

Вот соответствующий HTML:

<div class="proficiencydiv">
  <div class="progress-bar bg-success" role="progressbar" id="profBar" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-warning" role="progressbar" id="offBar" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Я ожидаю, что результат будет выглядеть так:

"[profBar][offBar]".

Вместо этого я получаю:

"[profBar]"

"[offBar]"

Answer 1

добавлено ниже css

.proficiencydiv{
    display: flex}

.proficiencydiv{
display: flex}

.proficiencydiv div{
margin: 10px}

<div class="proficiencydiv">
  <div class="progress-bar bg-success" role="progressbar" id="profBar" aria-valuemin="0" aria-valuemax="100">profBar</div>
  <div class="progress-bar bg-warning" role="progressbar" id="offBar" aria-valuemin="0" aria-valuemax="100">offBar</div>
</div>