JSFiddle - React, Tailwind, and code Playground

HTML

<section id="page_to_be_clicked">
  
</section>

<section id='sidebar'></section

CSS

html, body { height:100%; width:100%;}
#page_to_be_clicked { float:left; background:#f4f4f4; width:40%; height:100%; position:relative;}

#sidebar { float:right; background:#e3e2e2; width:50%; height:100%; position:relative;}

JavaScript

$('#page_to_be_clicked').click(function(e){
    var offset = $(this).offset();
    var comment_box_y_coord =  checkCoords(e.pageY - offset.top);
    console.info(comment_box_y_coord);

    $("#sidebar").append('<textarea id="cmmnt" rows="4" cols="10" '+
        'style="position:absolute;top:'+comment_box_y_coord +
        'px;left:5px"></textarea>');
})

function checkCoords(y) {
    if ($("textarea").length>0) {
        $ts = $("textarea");
        
        
        for (var i = 0; i<$ts.length;i++) {
            var $ti = $ts.eq(i);
            var tcoords = [$ti.offset().top, $ti.offset().top+$ti.height()]
            console.log(tcoords, " :: ", y);
            if (y>=tcoords[0] && y <= tcoords[1]) {
                console.log('boom');
                y = (tcoords[1]+3);
                console.log(y);
            }
        }
    }
    return y;
}