css - display percent sign after value inside input

I need to add a percent sign after the numeric value of an input element. Should look something like this:

I thought that I can solve this by using ::after

<input type="text" class="percent">

.percent::after {
    content: ' %';
}

but it looks like this is not the correct way to do it. The percent sigh should stick with the value, this means it should move when digits are added into the input. To add the % to the value of the input when the user types is not an acceptable solution. Any idea? Thank you.

This is by using contenteditable element instead of input, not sure if this is a possibility?

.percent {
  display: inline-block;
  width: 300px;
  border: 1px solid black;
  border-radius: 30px;
}

.percent::after {
  content: '%';
  display: inline-block;
}

.wrapper {
  width: 300px;
  border: 1px solid black;
  border-radius: 30px;
  display: flex;
}

.percentVal {
  flex: 1;
}

.wrapper input {
  border: 0;
  background: none;
  width: 10%;
}

<div class="percent" contenteditable="true"></div>
<div class="wrapper">
  <input class="with_percent" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">
  <div class="percentVal">%</div>
</div>