Как сделать так, чтобы input был по центру?

Question

[EgorSabyanin]

Здравствуйте, есть вот такая админка с подписками, у каждой подписки необходимо сделать цену с валютой по середине. Инпут интерактивный, то есть он должен оставаться в центре при наборе цены.

<label class="existing-subscription__label">
                            <input class="existing-subscription__input" type="text" name="price-month">
                            <span class="existing-subscription__currency"><span>&#8381;</span></span>
                        </label>

.existing-subscription__label {
  display: flex;
  align-items: center;
  justify-content: center;
}

.existing-subscription__label,
.existing-subscription__input {
  border: none !important;
  width: 60% !important;
  font-size: 16px;
  line-height: 1.5;
  font-family: Roboto, sans-serif;
  padding: unset !important;
  margin-bottom: 3px !important;
  text-align: right;
}

.existing-subscription__currency {
  color: #a161ff;
  font-size: 18px;
}

Answer 1

[Виталий Першин]

Answer 2

[Aetae]

Еслиб буковка была не цветной - можно было бы какой-нить inputmask посоветовать. Оно бы из коробки всё работало.
Подозреваю, что где-то на просторах есть библиотека и для цветной буковки, но в целом алгоритм такой:
Делаешь input с text-align: center и text-indent: -<размер буковки/2>.
Скриптом к нему абсолютно цепляешь div с pointer-events:none и копией стилей input, в котором прозрачный span с дублируемым введённым текстом(input.oninput) + span с раскрашенной буковкой.
Также следишь, чтоб input всегда был шире текста.