JSFiddle - React, Tailwind, and code Playground

HTML

<div class='testDiv' tabIndex=0>
  Test
</div>
<div class='testDiv second' tabIndex=0>
  Test2
</div>

CSS

div {
  height: 50px;
  width: 250px;
  border: 2px solid purple;
  background: #c486d0;
  color: white;
  text-align: center;
  line-height: 50px;
  
  transition: height .5s linear;
}

JavaScript

var d = document.getElementsByClassName('testDiv');

for (var i = 0; i < d.length; i++) {
  d[i].addEventListener('click', function(e) { 
  		//alert('hi');
		  e.target.innerHTML = 'I\'m open'; 
      e.target.style.height = '150px';
  });
  d[i].addEventListener('blur', function(e) { 
      var valid = true
      if (!valid) {
      	e.stopImmediatePropagation(); //didn't work
        console.log('not valid');
        return false;  //didn't work
        
        /***  if its not valid we want to cancel the click event ***/
      }
      else {
      	e.target.style.height = '50px';
      	e.target.innerHTML = 'I\'m closed';
      }
   });
}