JSFiddle - React, Tailwind, and code Playground

by Kaustubh Khare

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="main">
Main
  <div class="container1">  
  Container1
  </div>

  <div class="container2">
  Container2
    <div class="container21" contenteditable="true">
    Container21
    </div>
    
    <div class="container22" >    
    Container22
    </div>    
  </div>
</div>

CSS

.main{
  height: 500px;
  width: 500px;
}

.container1{
  height: 300px;
  width: 100%;
}

.container2{
  height: 200px;
  width: 100%;
  position : relative;
}

.container21{
  max-height: 200px;
  min-height: 100px;
  overflow: hidden;
  width: 100%;  
}

.container22{
  position : absolute;
  right: 10px;
}

JavaScript

$( document ).ready(function() {
    $(".container21").blur(function(event){
    	alert(event.relatedTarget);
		/*		if(event.relatedTarget != null &&  event.relatedTarget.className.indexOf("Container22") == -1){
        		alert("doSomthing);
        }*/
    }); 
});