I want to display a progress bar filled with color and on the right side, I would like to display the percentage as a text.

Take into account that the width of the color changes based on the percentage.

The problem is in the right text. It is not in the right on the gray area instead it is in the right of the blue area.

What I have so far

[![enter image description here](https://i.stack.imgur.com/EheBs.png)](https://i.stack.imgur.com/EheBs.png)

What I want

[![enter image description here](https://i.stack.imgur.com/TVW5m.png)](https://i.stack.imgur.com/TVW5m.png)

```css
.fill {
  width: 80%;
  height: 35px;
  background: #14cbeb;
}

#soft-tool {
  color: white;
  background: #0e8aa0;
}
```

```html
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Example</title>
  </head>
  <body>
  <div class="row bg-light text-white">
    <div id="soft-tool" class="col-sm-2 text-center">
      <h5>CSS</h5>
    </div>
    <div class="col-sm-10 px-0">
      <div class="fill">
        <div class="text-right">80%</div>
      </div>
    </div>
  </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>
```

I am using bootstrap. I tried to use columns but it doesn't help because of the percentages, these are going to change based on the category.

```html
<div class="row bg-light text-white">
    <div id="soft-tool" class="col-sm-2 text-center">
      <h5>CSS</h5>
    </div>
    <div class="col-sm-10 px-0">
      <div class="fill">
        <div class="text-right">80%</div>
      </div>
    </div>
</div>

```

```css
.fill {
  width: 80%;
  height: 35px;
  background: #14cbeb;
}

#soft-tool {
  color: white;
  background: #0e8aa0;
}

```

The bar should contain 3 sections, 

1. Name
2. Color based on the percentage
3. Percentage in text