bar progress stop working with "display: inline-block;" property - html

Question

I'm writing something for the new job and I'm having a problem with the progress bar.
I created the bar along with the number represented, ie if the number is 50 then half of the bar will be filled (as usual).
But when I put the bar and the number on the same line (with display: inline-block), the filling of the bar disappears. Without this property, the bar looks right but the number is not aligned to the same height
html:
<div style="width:100%;">
<div class="progress">
<div class="progress-bar" style="width:{{value}}%"></div>
</div>
<span class="value">{{value | number:0}}</span>
</div>
css:
.progress {
height: 0.3rem;
width: 90%;
display: inline-block;
}
.value {
float: right;
display: inline-block;
vertical-align:top;
}
i dont understand the issue.. need your help.
TNX!!!

Answer 1

Why don't you just use the wonders of FlexBox?
If you are unfamiliar with this, here is a link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Basically you can do the following:
https://jsfiddle.net/nL3pr8vw/2/
* {
padding: 0;
margin: 0;
}
.load {
display: flex;
justify-content: left;
align-items: center;
background: grey;
padding: 5px;
margin: 10px;
width: 300px;
border-radius: 5px;
}
.bar {
width: 45%;
background: red;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
height:25px;
}
p {
color: white;
font-family: Arial;
font-size: 0.5em;
}
<div class="load">
<div class="bar">
<span class="count"><p>45%</p></span>
</div>
</div>
Now with this code, you can just re-arrange the divs and mess around with the FlexBox in the CSS to get your desired result!