Align vertical text with the above bars

Question

I have a histogram where the bars are vertical. The text below is also vertical, I want to align the vertical text with the above bars so that the text is aligned with stripes.

HTML

<div class="progress-bars vertical-bars flat">
  <div class="progress-bar">
    <div class="progress-track">
      <div class="progress-fill">
        <span class="percentage">90%</span>
        <span class="skill-name">Football</span>
      </div>
    </div>
  </div>
</div>

Please view Codepen to see the whole image.

Now my vertical text is aligned a bit chaotic. How can I align the bottom text with the vertical stripes that I have?

Answer 1

You can achieve a final nice alignment using this css code:

.vertical-bars .progress-fill .skill-name {
    bottom: -30px;
    display: block;
    position: absolute;
    transform: rotate(270deg) translateX(-100%);
    transform-origin: 0 50% 0;
}

Demo

UPDATE:

transform-origin 0 50% 0 , , , translateX, , .

Answer 2

? "right: -7px" .skill-name ( px)

: Farzad YZ :)