Add padding between input text - html

Question

I want to add a text (calculator format) to an input field containing following data:
a digit
a sign (x, -, +, /)
a digit
How to add padding between those elements in one input field, so I could have:
[digit][30px gap][sign][10px gap][2nd digit]
Gaps between digits can be customized either.
Adding simple padding to the input doesn't help... ( https://jsfiddle.net/gzuv6Lr4/ shows it)
Any clues?
._inp {
color: red;
padding-left: 10px;
}
<form>
<input type="text" class="_inp" value="10 x 30" />
</form>

Answer 1

Use the CSS word-spacing property on the input field:
https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing

Answer 2

Look this solution:
var signsMap = new Map();
signsMap.set(16, "X");
signsMap.set(88, "x");
signsMap.set(107, "+");
signsMap.set(109, "-");
signsMap.set(111, "/");
var expression = document.getElementById("expression");
var numberSequence = false;
expression.addEventListener("keyup", function(e) {
console.log(!isNaN(e.key));
if (signsMap.get(e.keyCode)) {
findSign(signsMap.get(e.keyCode));
numberSequence = false;
} else if (!isNaN(e.key) && !numberSequence) {
var expValue = expression.value;
var head = expValue.substring(0, expression.selectionStart - 1);
var body = expValue.substring(expression.selectionStart - 1, expression.selectionStart);
var tail = expValue.substring(expression.selectionStart, expValue.length);
expression.value = head + " " + body + tail;
numberSequence = true;
} else {
e.preventDefault();
}
}, false);
function findSign(sign) {
var expValue = expression.value;
if (sign) {
if (expValue.indexOf(sign, expression.selectionStart - 1) > -1) {
var head = expValue.substring(0, expression.selectionStart - 1);
var body = expValue.substring(expression.selectionStart - 1, expression.selectionStart);
var tail = expValue.substring(expression.selectionStart, expValue.length);
expression.value = head + " " + body + tail;
}
} else {
for (const sign of signsMap.values()) {
if (expValue.indexOf(sign) > -1) {
expression.value = expValue.replace(sign, " " + sign);
break;
}
}
}
}
window.onload = findSign(false);
._inp {
color: red;
word-spacing: 10px;
}
<form>
<input type="text" id="expression" class="_inp" value="10 x 30" />
</form>