JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head></head>
    <body>
        <div class="scroll-content-item" data-pid="1773">
             <label>   
                <span class="custom">Custom</span>
                <input type="text" class="text custom_width" id="cust_width" value="960"/> 
                <p class="para"> This is test para</p>
            </label>
        </div> 
    </body>
</html>

JavaScript

jQuery(document).ready(function($) {

   
    $('.custom_width').click(function(event) {
        
        alert("input custom width event ");
       event.stopPropagation();
    });
    
    $('.para').click(function(event) {
          alert("paragraph event ");
       event.stopPropagation();
    });
    
    // On click, hide the currently displayed post and show the one clicked
    $('.scroll-content-item').click(function(event) {
          alert("parent div event ");
       event.stopPropagation();
    });

});