JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div style="grid-area:span;">
    <span>text.</span>
  </div>
  <div style="grid-area:button;">
    <button></button>
  </div>
</div>

CSS

div {
  display: grid;
  grid-template-columns: 60px 200px;
  grid-template-rows: auto;
  grid-template-areas: "span button";
  /* The issue is very sensetive to used font.
     Mac's default font is the hevetica so that the bug happen on only mac */
  font-family: 'Helvetica Neue', sans-serif;
  zoom: 150%;
}

JavaScript

function applyZoom(rect, zoom)
{
  var newRect = {
    left : rect.left * zoom,
    top : rect.top * zoom,
    width : rect.width * zoom,
    height : rect.height * zoom
  };
  return newRect;
};                                                                                 
                                                                                   
var zoom = getComputedStyle(document.querySelector('div')).getPropertyValue('zoom');
var buttonRect = applyZoom(document.querySelector('button').getBoundingClientRect(), zoom);
var spanRect = applyZoom(document.querySelector('span').getBoundingClientRect(), zoom);
                                                                                   
if (window.testRunner) {                                                           
  eventSender.mouseMoveTo(buttonRect.left + buttonRect.width * 2, buttonRect.top + buttonRect.height / 2);
  eventSender.mouseDown();
  eventSender.leapForward(100);
  eventSender.mouseMoveTo(spanRect.left + spanRect.width / 2, spanRect.top + spanRect.height / 2);
  eventSender.mouseUp();
}