Сергей Т

1 - Используй псевдоэлемент :first-letter и добавь ему отрицательный margin-left

p:first-letter {
  margin-left: -6px
}

2 - Или если eсть возможность то оберни первый знак в span и расположи через абсолютное позиционирование

3 - Или добавь через псевдоэлемент нужный символ и тоже расположи через абсолютное позиционирование

Почитай про блочную модель и свойство box-sizing
https://doka.guide/css/box-model/
https://doka.guide/css/box-sizing/

Оборачиваешь текст в div и задаешь ему картинку в качестве фона свойством background-image

оберни все в общий контейнер, и сделай контейнеру display: flex
или

display: grid;
grid-templates-columns: 1fr 1fr;

размеры колонок делаешь какие необходимо

для .progress__line-bg добавь:
position: relative;
а для .progress__line удали падинги и добавь:

position: absolute;
top: 0;
left: 0;
height: 100%;

и маленький совет, используйте целые числа в размерах)

Вот пример решения, можешь адаптировать его под свой код
https://codepen.io/tihomirovpro/pen/abExZrv