JSFiddle - React, Tailwind, and code Playground

HTML

<span id="text1">1111111111&#10;&#13;1111111111</span><!--
      --><span id="text2">2222222222&#10;&#13;2222222222</span><!--
      --><span><div id="text-cursor"></div> </span><!--
      --><span id="text3">3333333333&#10;&#13;3333333333</span>

CSS

span {
  white-space: pre;
  position: relative;
}

#text2 {
    color: red;
}

#text3 {
    color: green;
}

#text-cursor {
  position: absolute;
  display: inline-block;
  width: 1px;
  height: 100%;
  background-color: black;
}