Grid задать остаточное пространство слева от элементов

Существует блок с текстом и шкалой прогресса. Главный контейнер гибкий, в отличии от текста и шкалы прогресса. Внутри контейнера тег <a>, который имеет display: grid, а внутри блок с текстом и шкалой. Проблема в том, что расстояние, которое остаётся после позиционирования текста с шкалой появляется справа, а необходимо, чтобы оно было слева.

HTML:

<div class="boost">
  <div class="boostTest">
    <a href="#" class="boostEnlace boostEnlaceHeader">
      <span class="headerBoost">Boost</span>
      <div class="progressTile progressTileHeader">
        <div class="progressTileHeaderWrapper">
          <progress max="100" value="65"></progress>
        </div>
      </div>
    </a>
  </div>
</div>

CSS:

.boostTest {
    max-width: 490px;
}

.boostEnlace.boostEnlaceHeader {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 30px;
}

.headerBoost {
    font-weight: 700;
    font-size: 40px;
    color: #291400;
}

.progressTileHeader {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}