¿Es posible agregar símbolos iniciales y finales o texto al campo de entrada que no se puede eliminar?

Estoy tratando de tener $ al principio y % al final de dos campos. Similar a los campos de entrada en este sitio web: 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="">