JSFiddle - React, Tailwind, and code Playground

HTML

<div class="percentInput">
        <input maxlength="3" type="text" name="number" class="num_percent">
        <span>%</span>
    </div>

CSS

.percentInput { position:relative; display: inline-block; }
    .percentInput span { position: absolute; top:2px; right: 4px; line-height:100%; vertical-align: middle; }
    .num_percent { width:30px; text-align: right; padding-right: 15px; }