JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nonclick">Non-clickable area</div>
<div id="ruler">Non-clickable area</div>
<br/>
<div id="one">One</div>
<div id="two">Two</div>

CSS

#one, #two { height: 40px; width: 200px; margin: 20px; line-height: 40px } 

#one { background-color: gold }
#two { background-color: yellowgreen }

#ruler { position: absolute; width: 120px; height: 500px; background: #fee; z-index: -1 }
#nonclick { position: absolute; width: 120px; height: 500px; border-right: 2px red solid; }

JavaScript

$("#one").click(function(event) {
    if (event.offsetX < 100) return;
    alert("clicked!");
});