JSFiddle - React, Tailwind, and code Playground

HTML

<div id="charContainer"></div>

JavaScript

window.onload = function () {
    var chars = ['W', 'W', 'i', 's', ' ', 'i', 's', ' ', 'a', ' ', 't', 'e', 's', 't'];
    for (var i = 0; i != chars.length; i++) {
        //create new span element with char text inside
        var newChar = document.createElement('span');
        var newCharText = document.createTextNode(chars[i]);
        newChar.appendChild(newCharText);
        //append it
        document.getElementById('charContainer').appendChild(newChar);
    }
    
    document.onclick = function(e){
      	  if(e.target.parentNode.id == 'charContainer'){
           	//if parent node of the element clicked is the charContainer div
              
              var charWidth = e.target.offsetWidth;
              console.log(charWidth);
              
              
              //store click coord in here
              //char click coord has to be relative to the span
              //this the number for coord should be very low (usually under 7px)
              //store the click coord in this variable
              var charClickCoord = 0;
              
              var boundingRect = e.target.getBoundingClientRect()
              charClickCoord = e.clientX - boundingRect.left
              
              
              //get mouse coord and see is the user clicked the left half of the span or the right side
              if(charClickCoord > charWidth/2)
              {
               	console.log('right side clicked');   
              }
              else
              {
               	console.log('left side clicked');   
              }
          }
    };
    
};