JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<div contenteditable="true" id="fixed">
    This is a content editable section, with a fixed height
</div>

<div contenteditable="true" id="fluid">
    This is a content editable section with a fluid height
</div>

CSS

[contenteditable=true] {
margin:20px;   
overflow:hidden;    
}

#fixed {
 width: 200px;
height: 100px;    
}

#fluid {
 width: 200px;
min-height: 100px;    
}


[contenteditable=true]:hover, [contenteditable=true]:focus {
 -moz-box-shadow:     inset 0px 0px 10px 0px #ff0;
  -webkit-box-shadow: inset 0px 0px 10px 0px #ff0;
  box-shadow:         inset 0px 0px 10px 0px #ff0;   
}

.invalid {
 -moz-box-shadow:     inset 0px 0px 10px 0px #900 !important;
  -webkit-box-shadow: inset 0px 0px 10px 0px #900 !important;
  box-shadow:         inset 0px 0px 10px 0px #900 !important;   
}

JavaScript

$("[contenteditable=true]").on('keydown', function(){
    var contentHeight = this.scrollHeight;
    var declaredHeight = $(this).height();
    if (contentHeight > declaredHeight){
     $(this).addClass("invalid");   
    }else{
     $(this).removeClass("invalid");   
    }
});