JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<!-- THE DIV CALLED title -->
<div
     id="title"
     class="title"
     contenteditable="true"
     style="font-family: Helvetica; font-size:18px; font-weight:bold; background-color:#fff; color:#000; -webkit-tap-highlight-color:rgba(0,0,0,0); margin:14px;"
     autocapitalization="off"
     autocorrection="off"
     autocomplete="off"
></div>
<div
     id="title2"
     class="title"
     contenteditable="true"
     style="font-family: Helvetica; font-size:18px; font-weight:bold; background-color:#fff; color:#000; -webkit-tap-highlight-color:rgba(0,0,0,0); margin:14px;"
     autocapitalization="off"
     autocorrection="off"
     autocomplete="off"
></div>
<div id="a"></div>

CSS

#title {
    border: 1px #3399FF solid;
    min-height:50px;
    width:100px;
    word-wrap:break-word;
}
#title2 {
    filter:alpha(opacity=20);
    opacity:0.2;
    border: 1px #3399FF solid;
    min-height:50px;
    width:100px;
    word-wrap:break-word;
}

JavaScript

var slowl = 400 //updating time
var lastts = "";//last timestamp value
$("#title").on('keydown keyup change keypress', function(e) {//catch the event
	e.preventDefault();//stop the event
	if(e.timeStamp-lastts < slowl){//try prevent keypress abuse
		return false;
	}
	lastts = e.timeStamp;
	var html=$('#title').text();
	console.log(e);
	if(e.charCode!=0){//all browsers and events
		char = e.charCode;
	}else{
		char = e.keyCode;
	}
	content = $('#title').text()+String.fromCharCode(char); //prepare content
	$('#title2').text(content);
	var height = $('#title').height();
	$('#a').html(height);
	setTimeout("$('#title').text($('#title2').text());",slowl);//normalize the sitation
	
});