JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column1"><div class="row">
    <div class="column2"></div></div>
   
   </div>

CSS

.column1 { float: left; background: #000; width: 40%; height: 100px; margin: 20px; }
.column2 { float: left; background: #0F0; width: 40%; height: 100px; margin: 20px; }

JavaScript

$(".row").click( function () {

    doSomething();

});

$(".column2").click( function (e) {

    e.stopPropagation()
    
});

function doSomething() {

    alert("something");

}