Tab Characters Align Correctly in Firefox but Misaligned in Chrome – Why?

I’m encountering inconsistent tab alignment between Chrome and Firefox. In the provided example, Firefox aligns tabs properly, while Chrome breaks the vertical alignment. I need help understanding why this happens and how to fix it.

Reproduction Steps:

Open this JSFiddle in Firefox: https://jsfiddle.net/hpft9581/4/

Open the same JSFiddle in Chrome.

Observe the alignment of the text after the tags.

Expected Behavior (Firefox):

Tabs (t) align vertically, creating consistent indentation:

enter image description here

Actual Behavior (Chrome):

Tabs are misaligned, causing uneven spacing:enter image description here

HTML:

<div class="container">
  <div class="justify-font">
    <p>
      <speaker><span id="1"></span></speaker> In publishing an
    </p>
    <p>
      <speaker><span id="2"></span></speaker> In publishing anqweqweqweqweqweqweqweqweqweqweqwe
    </p>
  </div>
</div>

CSS:


.justify-font {
  text-align: justify;
  text-align-last: left;
  tab-size: 12; /* Explicit tab size */
  font-size: 23px;
  white-space: pre-wrap; /* Preserve whitespace */
  word-wrap: break-word;
}

.container {
  width: 700px;
  max-width: 700px;
  margin: auto;
}

JavaScript:

document.getElementById("1").innerText = 't' + "John Snow";
document.getElementById("2").innerText = 't' + "John Snowssssss";

Questions:

Why does Chrome misalign tab characters compared to Firefox?

How can I achieve consistent cross-browser tab alignment without relying on browser-specific quirks?