CSS - Prevent an element from wrapping in a progress bar - html

Question

I'm designing an animated progress bar to display ratings on my website. At the end of the bar, I want to display inside a circle the rating number (out of 10) corresponding to the final progress % of the bar. I want to have a responsive design.
My problem arises when dealing with a high progress %, such as 95%. The circle with the rating value is sent down to the next line. It is also the case when resizing my browser with a progress value such as 75%. With lower values, everything is fine. I tried to play around with negative margin-left and margin-right values for #ratingnumber, which seems to help a bit but still had trouble keeping the rating circle on the progress bar for really high progress %.
I'm looking for the CSS tweak to keep the rating circle on the progress bar for every rating cases.
jsfiddle for 95%: http://jsfiddle.net/4pzm98b0
jsfiddle for 50%: http://jsfiddle.net/z1wtqebj/
<div id="progressbar">
<div id="progress"></div>
<div id="ratingnumber">
9.5
</div>
</div>
body {
background-color: #aaa;
padding: 40px;
}
#progressbar {
width: 100%;
height: 20px;
background-color: white;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 3px;
border: 3px solid #666666;
clear: both;
}
#progress {
background: green;
height: 20px;
width: 0%;
max-width: 100%;
float: left;
-webkit-animation: progress 2s 1 forwards;
-moz-animation: progress 2s 1 forwards;
-ms-animation: progress 2s 1 forwards;
animation: progress 2s 1 forwards;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
#ratingnumber{
border: 4px solid green;
background: white;
padding: 10px;
float: left;
font-size: 28px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
border-radius: 50%;
position: relative;
left: -30px;
top: -24px;
}
#-webkit-keyframes progress {
from { }
to { width: 95% }
}
#-moz-keyframes progress {
from { }
to { width: 95% }
}
#-ms-keyframes progress {
from { }
to { width: 95% }
}
#keyframes progress {
from { }
to { width: 95% }
}

Answer 1

Add white-space: nowrap to the parent element, #progressbar. Then remove float: left from the children elements, and change the display to inline-block in order for them to respect the white-space property on the parent. Set vertical-align: top on the children in order to fix the vertical alignment.
Updated Example
#progressbar {
white-space: nowrap;
}
#ratingnumber, #progress {
display: inline-block;
vertical-align: top;
}
The positioning on the #ratingnumber element also needs to be changed to:
#ratingnumber {
position: relative;
top: -20px;
}