JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<textarea id="cagetextbox" class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>
</body>

CSS

textarea{  
  display:block;
  box-sizing: padding-box;
  overflow:hidden;

  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  border-radius:8px;
  border:6px solid #556677;
}

JavaScript

$(document)
    .on('input.textarea', '.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0,
            rows;
        this.rows = minRows;
        this.baseScrollHeight = this.baseScrollHeight | calcBaseScrollHeight(this);
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });

function calcBaseScrollHeight(textArea) {
    var savedValue = textArea.value,
        baseScrollHeight;
    textArea.value = '';
    baseScrollHeight = textArea.scrollHeight;
    textArea.value = savedValue;
    return baseScrollHeight;
}

function updateTextbox(text) {
	$('#cagetextbox').val(text).trigger('input.textarea');
	//$('#cagetextbox').attr("rows", Math.max.apply(null, text.split("\n").map(function(a){alert(a.length);return a.length;})));
};

updateTextbox("filetext filetext filetext filetext filetext filetext grow please I beg you sweet textbox with the nice css Come on!");