JSFiddle - React, Tailwind, and code Playground

HTML

<div style="font-size: 70%;"><h2 class="outer">text </h2></div><div style="font-size: 70%;"><h2 class="outer">text </h2></div><div style="font-size: 70%;"><h2 class="outer">text </h2></div><div style="font-size: 70%;"><h2 class="outer">text </h2></div>

JavaScript

$(document).ready(function(){
      $(".outer").on('click', function() {
         if( this.children.length) return;
         var text = $.trim(this.innerHTML);
         $("<input>").val(text).appendTo($(this).empty())
                               .focus();
      }).on('blur', 'input', function(){
         $(this).replaceWith( $.trim(this.value) );
      })
   })