JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<section class="container">
    <h1>Plugin jQuery Stretchy.js</h1>
    <form>
        <div class="input">
            <label>Nama</label>
            <input type="text" placeholder="Fullname">
                </div>
            <div class="input">
                <label>Email</label>
                <input type="email" placeholder="Email">
                    </div>
                <div class="input">
                    <label>Password</label>
                    <input type="password" placeholder="Password">
                        </div>
                    <div class="input">
                        <label class="pos">Alamat</label>
                        <textarea placeholder="Alamat"></textarea>
                    </div>
                    </form>
                </section>

CSS

*{margin:0; padding:0}
body {font-family: sans-serif;}

.container {
    width: 400px;
    margin: 50px auto;
    padding: 20px;
    background-color:  #39B3AC;
}

.container h1, .input {
    margin-bottom: 20px;
    color: white;
}

.container label {
    margin: 0 20px 0 0;
}

.container input {
    padding: 5px;
    border: 3px solid #FFF;
    background-color: #ccc;
}

.container textarea {
    padding: 5px;
}

.pos {
    vertical-align: top;
}

JavaScript

/*
 * Stretchy: Form element autosizing, the way it should be.
 * by Lea Verou http://lea.verou.me 
 * MIT license
 */
(function() {

if (!self.Element) {
	return; // super old browser
}

if (!Element.prototype.matches) {
	Element.prototype.matches = Element.prototype.webkitMatchesSelector || Element.prototype.mozMatchesSelector || Element.prototype.msMatchesSelector || Element.prototype.oMatchesSelector || null;
}

if (!Element.prototype.matches) {
	return;
}

function $$(expr, con) {
	return expr instanceof Node || expr instanceof Window? [expr] :
	       [].slice.call(typeof expr == "string"? (con || document).querySelectorAll(expr) : expr || []);
}

var _ = self.Stretchy = {
	selectors: {
		base: 'textarea, select:not([size]), input:not([type]), input[type="' + "text url email tel".split(" ").join('"], input[type="') + '"]',
		filter: "*"
	},

	// Script element this was included with, if any
	script: $$("script").pop(),

	// Autosize one element. The core of Stretchy.
	resize: function(element) {
		if (!_.resizes(element)) {
			return;
		}
		
		var cs = getComputedStyle(element);
		var offset = 0;

		if (!element.value && element.placeholder) {
			var empty = true;
			element.value = element.placeholder;
		}
		
		var type = element.nodeName.toLowerCase();
		
		if (type == "textarea") {
			element.style.height = "0";

			if (cs.boxSizing == "border-box") {
				offset = element.offsetHeight;
			}
			else if (cs.boxSizing == "content-box") {
				offset = -element.clientHeight;
			}

			element.style.height = element.scrollHeight + offset + "px";
		}
		else if(type == "input") {
			element.style.width = "0";

			if (cs.boxSizing == "border-box") {
				offset = element.offsetWidth;
			}
			else if (cs.boxSizing == "padding-box") {
				offset = element.clientWidth;
			}

			// Safari misreports scrollWidth, so we will instead set scrollLeft to a
			// huge number, and read that back to see what it was clipped to
			element.scrollLeft = 1e+10;

			var width =...