Существует блок с текстом и шкалой прогресса. Главный контейнер гибкий, в отличии от текста и шкалы прогресса. Внутри контейнера тег <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;
}