JSFiddle - React, Tailwind, and code Playground

by Niffler

HTML

<ul id="UL">
    <li class="newComment_row">
        <div class="userComments_photo">
            <img class="photo" src="http://dummyimage.com/128x128/ddd/333.png" alt="" />
        </div>
        <textarea id="" class="textarea" rows="1" placeholder="Escribe un comentario..." title="Escribe un comentario..."></textarea>
    </li>
</ul>

CSS

#UL {
    width: 494px;
    list-style: none outside none;
    margin: 0px;
    padding: 0px;
    border-top: 1px solid rgb(225, 226, 227);
}
.newComment_row {
    height: 32px;
    position: relative;
    width: 470px;
    background: #ddd;
    border-radius: 0 0 2px 2px;
    list-style: none outside none;
    margin: 0px 12px;
    padding: 4px 0px 8px;
	rows: 1px;
}

.userComments_photo {
    position: relative;
    float: left;
    height: 32px;
    width: 32px;
}

.photo {
    position: absolute;
    display: block;
    height: 32px;
    width: 32px;
    border: none;
}
.textarea {
    resize: none;
    width: 420px;
    font: normal normal normal 12px/15.3599996566772px Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
    position: absolute;
    padding: 8px 3px 0 3px;
    margin: 0 7px;
    overflow: hidden;
}

/* new */
.textarea {
    width: 416px;
    position: initial;
}
.newComment_row {
    height: auto;
    padding-bottom: 3px;
}

JavaScript

function h(e) {
    $(e).css({
        'height': 'auto',
            'overflow-y': 'hidden'
    }).height(e.scrollHeight);
}
$('textarea').each(function () {
    h(this);
}).on('input', function () {
    h(this);
});