<div class="input-group">
  <input class="input-group__field" type="number" value="999">
  <span class="input-group__overlay">
    <span class="input-group__value">999</span>
    <span class="input-group__unit">😀</span>
  </span>
</div>

.input-group {
  --padding: 5px;
  display: inline-block;
  position: relative;
  font-family: sans-serif;
  line-height: 1.5;
}

.input-group__field {
  border: none;
  margin: 0;
  padding: var(--padding);
  font: inherit;
  line-height: inherit;
  outline: 2px solid #4caf50;
  transition: outline-color 250ms;
}

.input-group__field:focus {
  outline-color: #ffc107;
}

.input-group__overlay {
  position: absolute;
  inset: 0 20px 0 0;
  pointer-events: none;
  padding: var(--padding);
  white-space: nowrap;
  overflow: hidden;
}

.input-group__value {
  white-space: nowrap;
  visibility: hidden;
}

const inputField = document.querySelector('.input-group__field');
const inputValue = document.querySelector('.input-group__value');

inputField.addEventListener('input', ({ target }) => {
  target.value = Number(target.value);
  inputValue.textContent = target.value;
});