jQuery Simple Example
HTML
<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<input type="number" min="0" max="100" value="100"> <span class="percentage-char">%</span>
CSS
input {
width: 55px;
height: 20px;
font-size:18px;
}
.percentage-char {
position: absolute;
left: 32px;
top: 1px;
font-size: 18px;
}
.one-digit {
left: 13px;
}
.two-digits{
left: 24px;
}
JavaScript
$(":input").change(function() {
if ($(this).val() < 10) {
$('.percentage-char').removeClass('two-digits');
$('.percentage-char').addClass('one-digit');
} else if ($(this).val() > 9 && $(this).val() < 100) {
$('.percentage-char').addClass('two-digits');
} else {
$('.percentage-char').removeClass('one-digit two-digits');
}
});