JSFiddle - React, Tailwind, and code Playground

Inline Block positioning in fixed width fonts with CH relative sizing.

HTML

<div class="widthtest" contenteditable><div class="ch-heighttest"></div>this is some test text<br>
this is <tester>so</tester> test text<br>
this is some test text<br></div>
<br>
<br>
<div class="inlineblocktest" contenteditable><div class="ch-heighttest"></div><word>this</word><sp> </sp><word>is</word><sp> </sp><word>some</word><sp> </sp><word>test</word><sp> </sp><word>text</word><br>
<word>this</word><sp> </sp><word>is</word> <tester>so</tester> <word>test</word><sp> </sp><word>text</word><br>
<word>this</word><sp> </sp><word>is</word><sp> </sp><word>some</word><sp> </sp><word>test</word><sp> </sp><word>text</word><br></div>

SCSS

html{
  font-size:13px;
  background:darkgray;
}
*{
  box-sizing:border-box;
}

pre{
  /* visible:hidden; */
  /* color:transparent; */
  font-size:1em;
  position:relative;
  background:rgba(255, 180, 0, 0.4);
}

.code{
  background:rgba(255, 180, 0, 0.4);
  position:relative;
}

.height-test, .big-height-test{
  background:rgba(255, 180, 0, 0.4);
  width:0.6em;
  position:absolute;
  top:0;
  left:0;
  height:1.18em; /* messy :\ */
}

.pre{
  font-family: monospace;
}
sp{
  display:inline-block;
  font-family: monospace;
  width:0.6em;
  content:'&ensp;';
  whitespace: pre;
}

.widthtest, .inlineblocktest{
  font-size:16px;
  display:block;
  color:white;
  font-family: monospace;
  background:teal;
  /* width:22ch; */
/*   height:2ch;  (could it be this easy???)*/
}

.widthtest{
  line-height:29px;
  /* line-height:3ch; */
  tester{
    display:inline-block;
    background:blue;
    min-width:6ch;
    padding-bottom:3px;
    margin-bottom:-3px;
    padding-left:1ch;
    margin-left:-1ch;
    padding-right:1ch;
    margin-right:-1ch;
  }
}

.ch-heighttest{
  position:absolute;
  top:0;
  left:0;
  z-height:2;
  height:calc(3*2ch);
  width:2px;
  background:#bada55;
}

.inlineblocktest{
  line-height:18px;
  /* line-height:2ch; */
  word, tester{
    display:inline-block;
    padding-top:3px;
    padding-bottom:3px;
    height:30px
  }
  tester{
    background-color:green;
  }
}

JavaScript

/*this is some test text*/