Is it possible to add leading and ending symbols or text to input field which cannot be removed?

I am trying to have a $ at the beginning and % at the end of two fields. Similar to the input fields on this website: https://www.nerdwallet.com/mortgages/mortgage-calculator

<input type="text" maxlength="12" name="purchasePrice" data-name="purchasePrice" placeholder="$200,000" required="">
<input type="text" maxlength="3" name="rate" data-name="rate" placeholder="2%" required="">