JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bg">
<div class="a t" CONTENTEDITABLE>hold right arrow</div>
<div class="b t" CONTENTEDITABLE>hold right arrow</div>
<div class="c t" CONTENTEDITABLE>hold right arrow</div>
</div>

CSS

.bg {width:2000px; height:2000px; border:solid 1px}

.t {position:absolute; width:50px; height:50px; background:orange}

.a {top:20px; left:20px}
.b {top:20px; left:80px}
.c {top:80px; left:20px}

JavaScript

$(document).on('keydown',function(e){
	console.log(this, e.target);
    var key = e.charCode || e.keyCode;
    if(key == 16 || key == 32 || key == 33 || key == 34 || key == 35 || key == 36 || key == 37 || key == 38 || key == 39 || key == 40 ) {
	    e.preventDefault();
	} else {}
});
$('.b').on('keydown', function(e) {
  e.stopPropagation(); 
  var key = e.charCode || e.keyCode;
   //Above part comes from http://stackoverflow.com/questions/7451468/contenteditable-div-how-can-i-determine-if-the-cursor-is-at-the-start-or-end-o/7478420#7478420
    range = window.getSelection().getRangeAt(0)
    post_range = document.createRange();
    post_range.selectNodeContents(this);
    post_range.setStart(range.endContainer, range.endOffset);
    next_text = post_range.cloneContents();
    
    if( next_text.textContent.length === 0 && key == 39 ){
        e.preventDefault();
    }
});