Having trouble with the progress bar for a new job project. The issue arises when trying to display the bar and number on the same line using inline-block - it causes the filling of the bar to disappear. When not using this property, the bar looks correct but the number is not aligned correctly.
Here's the HTML code:
<div style="width:100%;">
<div class="progress">
<div class="progress-bar" style="width:{{value}}%"></div>
</div>
<span class="value">{{value | number:0}}</span>
</div>
And here's the CSS code:
.progress {
height: 0.3rem;
width: 90%;
display: inline-block;
}
.value {
float: right;
display: inline-block;
vertical-align: top;
}
Any insights on why this issue is happening would be greatly appreciated. Thanks in advance!