Align paragraph with two spans on the same line

Question

I am creating an arcade game with JavaScript and jQuery. In this game, I need to align the level, score and high score in the same line.

My HTML structure looks like this

<div class="game-info">
  <p id="level">
    <span id="score"></span>
    <span id="high-score"></span>
  </p>
</div>

For the CSS, I want to provide some breathing room, between the paragraph and the two spans. Span elements are by nature inline elements so they should be able to be on the same line.

#score, #high-score {
  margin-left: 10%;
  font-weight: bold;
}

Here is the JavaScript code I have

$("#level").html("<strong>Level: </strong>" + level + 
"<span id='score'>Score: " + score + "</span><span id='high-score'> High Score: " + 
highScore() + "</span>");

As you can see, I have clearly wrapped everything in span elements.

I'd like it to look like this

Level: 1         Score: 4      High Score: 16

However, it has some crazy effects.

It will start out with the value for high score on it's own line. And after 5 or 6 correct answers in a row, it will line up on the correct line. Later, if you score more than 10, it will drop back to a new line.

Here's the fiddle

https://jsfiddle.net/mypkktu7/1/

I do not understand this weird behavior.

Is there anything I can do to fix it? Something like using a min-width property?

Answer 1

add a white-space: nowrap;

to your paragraph tag css and you'll be good.

Css

#level {
  white-space: nowrap;
}

white-space has a hyphen in between to break the words

Answer 2

Try

.game-info {
  position: fixed;
  width: 100%;
}

PS : It's a fun game :)