JSFiddle - React, Tailwind, and code Playground

by Guruprasad Rao

HTML

<div class="wrapper">
   <div class="content">
     <p>lorem ipsum elit sitlorem ipsum elit sitlorem ipsum elit sitlorem ipsum elit sifgfgfgfgfgfgfg fgfgt lorem ipsum elit sitlorem ipsum elit dfdfdfdfdfdfdsitlorem ipsum elit sitloreit sitlorem ipsum elit sifgfgfgfgfgfgfg fgfgt lorem ipsum elit sitlorem ipsum elit dfddipsum elit sitlorem ipsum elit dfdfdfdfdfdfdsitlorem ipsum elit sitloreit sitlorem ipsum elit sifgfgfgfgfgfgfg f dfdfdfdfdfdfdsitlorem ipsum elit sitloreit sitlorem ipsum elit sifgfgfgfgfgfgfg fgfgt lorem ipsum elit sitlorem ipsum elit dfdfdfdfdfdfdsitlorem ipsum elit sitlorem ipsum elit sitlorem ipsum elit sitlore </p>
      
     <div><textarea></textarea></div>
   </div>
  </div>

CSS

.wrapper{
  background:#f90;
  position:relative;
  height:auto;
    margin:10px
}
.content{
  background:#DCFFC8;
   margin:10px;
  position:absolute;
  top:0; left:0;
    padding:10px;
}

textarea { margin: 1em; outline: none; }

JavaScript

var divHeight = $('.content').height(); 
$('.wrapper').css('min-height', divHeight+40+'px');


//Textarea autogrow
;(function($){    
    //pass in just the context as a $(obj) or a settings JS object
    $.fn.autogrow = function(opts) {
        var that = $(this).css({overflow: 'hidden', resize: 'none'}) //prevent scrollies
            , selector = that.selector
            , defaults = {
                context: $(document) //what to wire events to
                , animate: true //if you want the size change to animate
                , speed: 200 //speed of animation
                , fixMinHeight: true //if you don't want the box to shrink below its initial size
                , cloneClass: 'autogrowclone' //helper CSS class for clone if you need to add special rules
                , onInitialize: false //resizes the textareas when the plugin is initialized
            }
        ;
        opts = $.isPlainObject(opts) ? opts : {context: opts ? opts : $(document)};
        opts = $.extend({}, defaults, opts);
        that.each(function(i, elem){
            var min, clone;
            elem = $(elem);
            //if the element is "invisible", we get an incorrect height value
            //to get correct value, clone and append to the body. 
            if (elem.is(':visible') || parseInt(elem.css('height'), 10) > 0) {
                min = parseInt(elem.css('height'), 10) || elem.innerHeight();
            } else {
                clone = elem.clone()
                    .addClass(opts.cloneClass)
                    .val(elem.val())
                    .css({
                        position: 'absolute'
                        , visibility: 'hidden'
                        , display: 'block'
                    })
                ;
                $('body').append(clone);
                min = clone.innerHeight();
                clone.remove();
            }
            if (opts.fixMinHeight) {
                elem.data('autogrow-start-height', min);...