JSFiddle - React, Tailwind, and code Playground

by the wazz

HTML

<div id='write'>
    <span class='RowSpan'>This is some text</span>
    <span class='RowSpan'>this is some text this</span>
</div>
<div id='caret'></div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
body{
    margin: 0;
}
#write {
  font-family: 'Roboto Mono';
    height: 300px;
    width: 400px;
    background: #1f2227;
    padding: 10px;
    color: white;
}
#caret{
    height: 15px;
    width: 3px;
    background: #80ff00;
    display: inline-block;
    position: absolute;
}



.RowSpan{
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    height: 20px;
}

JavaScript

let writeDiv = document.querySelector('#write');
let caret = document.querySelector('#caret')

writeDiv.addEventListener('click', (e) => {
    if(e.target.tagName == 'SPAN'){
    var caretPos = e.target.selectionStart;
        //moveCaretOnClick(e)
        e.target.selectionStart = caretPos;
    }

})

function moveCaretOnClick(e) {
    let y = window.getSelection().focusOffset * window.getSelection().selectionStart 
    caret.style = `left: ${y}px; top: ${e.target.offsetTop + 3}px`; 
}