JSFiddle - React, Tailwind, and code Playground

HTML

<div id='bigDiv'>
    CLICK ON THIS TEXT
</div>

<div id='widthTester'>
</div>

CSS

#bigDiv {
    width: 600px;
    height: 500px;
    line-height: 500px;
    font-size: 14px;
    text-align: center;
    background-color: gray;
}

#widthTester {
    position: absolute;
    height: auto;
    width: auto;
    font-size: 14px;
    white-space: nowrap;
}

JavaScript

jQuery('#bigDiv').click(function(e) {
        // Get the x and y offest from the window
        margin_top = jQuery(this).offset().top;
        margin_left = jQuery(this).offset().left;

        // Get the dimensions of the element.
        height = jQuery(this).height();
        width = jQuery(this).width();

        // Retrieve the font_size and remove the px addition
        font_size = parseInt(jQuery(this).css('font-size').replace('px', ''));

        // Retrieve the position of the click
        click_x = e.pageX;
        click_y = e.pageY;

        // These variables will be used to validate the end result
        var in_text_y = false;
        var in_text_x = false;
        
        // Determine the click relative to the clicked element
        relative_x = click_x - margin_left;
        relative_y = click_y - margin_top;
        
        // Determine whether the y-coordinate of the click was in the text
        if (relative_y >= (parseFloat(height) / 2) - (parseFloat(font_size) / 2) &&
            relative_y <= (parseFloat(height) / 2) + (parseFloat(font_size) / 2))
            in_text_y = true;

        // This piece of code copies the string and places it in a invisible div
        // If this div has the same font styling and no paddings etc... it can
        // be used to get the width of the text
        text = jQuery(this).text();
        text_width = jQuery('#widthTester').html(text).width();

        if (relative_x >= (parseFloat(width) / 2) - (parseFloat(text_width) / 2) &&
            relative_x < (parseFloat(width) / 2) + (parseFloat(text_width) / 2))
            in_text_x = true;

        if (in_text_x && in_text_y)
            alert('You clicked the text!');
    });