Text changes height after adding unicode character - html

Question

I have HTML element with text content.
Font is set to sans-serif in CSS.
Text is updated via JavaScript.
Sometimes contains just ASCII characters but, sometimes, includes "➜" character. See following snippet:
var text = document.getElementById("text");
var chars = "A➜";
var i = 0;
function update() {
i=1-i;
text.innerText = "char: " + chars[i];
setTimeout(update, 500);
}
update();
div {
font-family: sans-serif;
background-color: lightgrey;
}
<div id="text" />
This works fine in IE11 but in Chrome the element "wiggles":
It looks like this happens because different font is used to render "➜" character:
Arial—Local file(5 glyphs)
Segoe UI Symbol—Local file(1 glyph)
Is there a simple way to stabilize the height of whole element and position of static part of text?
One way seems to be using "Segoe UI Symbol" for whole element - but I prefer a different font for regular text.

Answer 1

Just add a line-height style to your element:
var text = document.getElementById("text");
var chars = "A➜";
var i = 0;
function update() {
i=1-i;
text.innerText = "char: " + chars[i];
setTimeout(update, 500);
}
update();
div {
font-family: sans-serif;
background-color: lightgrey;
line-height: 1em;
}
<div id="text" />

Answer 2

An easy fix would be to set the line-height in CSS
var text = document.getElementById("x");
var chars = "A➜";
var i = 0;
function update() {
i=1-i;
text.innerText = chars[i];
setTimeout(update, 500);
}
update();
div {
font-family: sans-serif;
background-color: lightgrey;
line-height: 1em;
}
#x {
line-height: 1em;
}
<div id="text">char: <span id="x" /></div>