JSFiddle - React, Tailwind, and code Playground

HTML

<div class="product-content__amount-block">
  <label class="product-content__ordering-heading" for="order-amount">Введите количество</label>
  <input type="text" name="order-amount" id="order-amount" pattern="[0-9]{,6}" required>
  <span>шт.</span>
</div>

SCSS

.product-content__amount-block {
    display: inline-block;
    position: relative;

    span {
      position: absolute;
      display: none;
      font-size: 18px;
      font-weight: 400;
      color: dark-grey;
      top: 25px;
      right: 25px;
    }

    input {
      display: block;
      width: 120px;
      padding-right: 60px;
      border: none;
      border-bottom: 1px solid pink;
      font-size: 18px;
      font-weight: 400;
      color: dark-grey;
      text-align: right;

      &:valid + span {
        display: inline;
      }
    }
  }