JSFiddle - React, Tailwind, and code Playground

HTML

<div id="par1"><span>Text 1</span></div>
<div id="par2"><span>Text 1</span></div>
<div id="par3"><span>Text 1</span></div>
<div id="par4"><span>Text 1</span></div>

CSS

body, html {
    margin: 0; padding: 0;
    height: 100%;
}
#header {
   height: 120px;
   position: fixed;
   top: 0;
   background: red;
   width: 100%;
}

#content {
    height: 100%;
    position: absolute;
    top: 22px;
}
#content-offset {
    margin-top: 120px;
    background: aqua;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
}

JavaScript

$(function(){
   $('span').bind('click', function(){
      $(this).replaceWith($('<input/>', {
         id:       'newinp',
         type:     'text',
         focusout: function(){
            $(this).replaceWith('<span>' + $(this).val() + '</span>');
         }
      }));       
      $('#newinp').focus();
   });
});