When displaying text, some alphabets take up more space than others. So how can I adjust the white space between elements '#re1' and '#re2' automatically in the scenario described below?
In this code snippet, what is the best way to adjust the margin between '#re1' and '#re2' dynamically? I want to avoid situations like the one shown in the images linked below,
https://i.stack.imgur.com/WzOPl.png
https://i.stack.imgur.com/igKQi.png
If I set the margin based on the widest alphabet 'm', then the gap between the elements becomes too large when typing narrower letters like 'a'.
function tx() {
var x = document.getElementById("123").value;
document.getElementsByClassName("re")[0].innerHTML = x;
document.getElementsByClassName("re")[1].innerHTML = x;
}#re1 {
width: 200px;
word-wrap: break-word;
height: 20px;
}
#re2 {
width: 150px;
word-wrap: break-word;
height: 20px;
margin-top: 3px;
}<!doctype html>
<html>
<head>
<body>
<textarea id="123" onKeyUp="tx();" onKeyPress="tx();" maxlength="23"></textarea><br>
<div class="out">
<div class="re" id="re1">1</div>
<div class="re" id="re2">2</div>
</div>
</body>
</html>