我试图使一个配置文件包含一个进度条的排名系统。我想显示在右边和左边的当前排名=〉下一个排名和中间的进度条。对不起，我的英语在这里的一个例子：
我想要的
这是我得到的My attempt

<div class="card">
<div class="progress userProfileProgress myProfileProgress">
  <h6 class="current_rank">8</h6>
  <div class="determinate userProfileDeterminate" style="width: 0%; background-color: #00d871;"></div>
  <h6 class="next_rank">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;
}