Bootstrap 4 Progress bar alignment - html

Question

I'm trying to create a rating indicator using bootstrap 4 progress bar. Following is what I'm trying to achieve. However bootstrap progress bar using flex hence I can't align the text in the left and right.
JSFiddle
HTML
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="review__rating__stats">
<span class="review__rating__progress">
<span class="review__rating__level">5 Star</span>
<span class="progress">
<span class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></span>
</span>
<span class="review__rating__count">68</span>
</span>
</div>
</div>
</div>

Answer 1

You might have to set a width for .review__rating__count. The "3" was causing the misalignment because it's a single digit, whereas other counts are double digits, which take up more spaces.
Now you can even set .review__rating__stats as flexbox, then use flex: to set a default width for .review__rating__count.
Layout
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="review__rating__stats">
<div class="review__rating__progress">
<strong class="review__rating__level">5 Star</strong>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 68%"
aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<strong class="review__rating__count">68</strong>
</div>
<div class="review__rating__progress" />
...
</div>
</div>
</div>
</div>
Styles
.review__rating__progress {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
}
.review__rating__progress .review__rating__level,
.review__rating__progress .review__rating__count {
/* 10% is the default width for the level and count labels */
flex: 1 1 10%;
}
.review__rating__progress .review__rating__level {
text-align: right;
}
.review__rating__progress .progress {
margin: 0.25rem 1rem;
flex-grow: 8;
}
Result
demo: https://jsfiddle.net/davidliang2008/j4y70wfz/36/

Answer 2

Put each progress bar in row like such:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<div class="container review__rating__stats">
<div class="row review__rating__progress">
<span class="col-sm-2 review__rating__level">5 Star</span>
<div class="col-sm-9 align-self-center">
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<span class="col-sm-1 review__rating__count">68</span>
</div>
</div>
</div>
</div>
Note that the div that contains the progress bar must have the align-self-center class otherwise it won't be vertically centered.