Make 2 <small> each side of a div HTML-CodePudding

I'm trying to make a profile containing a progress bar for ranking system. I want to display at the right and left the current rank => next rank and at the middle the progress bar. Sorry for my english here an example:

What i want Example attempted

And here what i got My attempt

<div >
<div >
  <h6 >8</h6>
  <div  style="width: 0%; background-color: #00d871;"></div>
  <h6 >7</h6>
</div>
</div>

.myProfileProgress {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "current_rank MyProfileProgress next_rank";
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 17px;
  margin-right: 17px;
}

.current_rank {
  grid-area: current_rank;
}

.MyProfileProgress {
  grid-area: MyProfileProgress;
}

.next_rank {
  grid-area: next_rank;
}

.card .myProfileProgress {
  background-color: var(--color-dark-variant);
  position: relative;
  top: 15px;
}

.card .userProfileProgress, .userProfileDeterminate {
  height: 7px;
  border-radius: 5px;
}

.progress {
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  background-color: #acece6;
  border-radius: 2px;
  margin: 0.5rem 0 1rem 0;
  overflow: hidden;
}

CodePudding user response：

.myProfileProgress {
  display: grid;
  grid-template-columns: 10% 1fr 10%;
  grid-template-rows: 1fr;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 17px;
  margin-right: 17px;
  align-items: center;
}

.current_rank {
  grid-area: 1 / 1 / 2 / 2;
  background-color: red;
  width: 100%;
  height: 100%;
}

.progress {
  grid-area: 1 / 2 / 2 / 3;
  background-color: grey;
  position: relative;
  width: 100%;
  height: 100%;
}

.next_rank {
  grid-area: 1 / 3 / 2 / 4;
  background-color: red;
  width: 100%;
  height: 100%;
}

.progress-inside {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 100%;
  background-color: blue;
}

<div >
  <div >
    <h6>8</h6>
  </div>
  <div >
    <div >

    </div>
  </div>
  <div >
    <h6>11</h6>
  </div>
</div>

Simplified one from yours, but you can apply any CSS on it

prodress-inside is the length of the progress bar