JSFiddle - React, Tailwind, and code Playground

HTML

<div id="under" class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque sapien vel metus commodo id porta quam vulputate. Mauris tincidunt massa id lorem imperdiet a elementum enim aliquet. Donec non luctus sapien. Nam condimentum erat a lectus consequat at egestas dui dapibus. Cras venenatis nibh a ligula convallis viverra. Donec euismod, sapien quis blandit interdum, risus sem blandit dui, sed tempus dolor purus gravida sem. Aliquam tempus elementum mollis. Suspendisse nec porttitor urna. Phasellus erat libero, porttitor a consequat eget, ultrices sed nisi.
</div>
<div id="over" class="text overlay">

CSS

body, html {
  padding:0;
  margin:0;
}

div.text {
  height:600px;
  width: 600px;
  position:absolute;
  overflow-y:hidden;
}

div.overlay {
  width: 200px;
  background:rgba(0,0,0,0.2);
  cursor: text;
        }

JavaScript

function $(id) {
  return document.getElementById(id);
}

function init() {
  var under = $('under');
  under.addEventListener('mousedown', mouseDown, false);
  
  var over = $('over');
  over.addEventListener('mousedown', 
    function(e) { 
      simulateMouse(e, 'mousedown'); 
    }, false);
  
  over.addEventListener('mouseup', 
    function(e) { 
      simulateMouse(e, 'mouseup'); 
    }, false);
    
  over.addEventListener('mousemove', 
     function(e) { 
       simulateMouse(e, 'mousemove'); 
     }, false);
}

function simulateMouse(e, type) {
  
  var evt = document.createEvent('MouseEvent');
  evt.initMouseEvent(type, true, false, window, 0, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, 0, null);
  $('under').dispatchEvent(evt);
    e.preventDefault();
}

function mouseDown(e) {
  console.log(' Mousedown target: ', e.target);
}

window.onload = init;