гибкая сетка рушит индикаторы выполнения

Question

Я хочу получить результат:

**** ****

---

однако я получаю:

**
**
**
**

или другие подобные вещи.
Я хочу, чтобы «полоса прогресса» была полной длины
и 2 на 2, а не все друг под другом
Я чувствую, что это как-то связано с flex / grid, но я не могу понять это

вот живой фрагмент: 82729.ict-lab.nl
вот мой код:

    .skills>.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
}

.skills>* {
    margin: auto;
    padding-left: 10%;
    padding-right: 10%;
}

.progress-bar {
    height: 15px;
    width: 45%;
    position: relative;
    background-color: #EEEEEE;
    text-align: left;

    border: 1px solid black;
    padding: 1px;
    box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}

.progress {
    display: block;
    height: 100%;
    background-color: rgb(43,194,83);

    box-shadow: inset 0 2px 9px  rgba(255,255,255,0.3),
                inset 0 -2px 6px rgba(0,0,0,0.4);
    
    position: relative;
    overflow: hidden;
}

<div class="skills">
  <h2>Skills</h2>
  <div class="grid-wrapper">
    <div class="progress-wrapper">
      <p>CSS</p>
      <div class="progress-bar">
        <span class="progress" style="width: 66%"></span>
      </div>
    </div>
  </div>

  <div class="grid-wrapper">
    <div class="progress-wrapper">
      <p>HTML</p>
      <div class="progress-bar">
        <span class="progress" style="width: 66%"></span>
      </div>
    </div>
  </div>

  <div class="grid-wrapper">
    <div class="progress-wrapper">
      <p>JS</p>
      <div class="progress-bar">
        <span class="progress" style="width: 66%"></span>
      </div>
    </div>
  </div>

  <div class="grid-wrapper">
    <div class="progress-wrapper">
      <p>PHP</p>
      <div class="progress-bar">
        <span class="progress" style="width: 66%"></span>
      </div>
    </div>
  </div>
</div>