JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="warp">
<div class="conversation" style="--number: 12px"></div>
<textarea></textarea>
</div>

CSS

textarea{
 width:243px;
 
 }
.warp{
height:300px;
width:250px;
}
.conversation{
 height: calc(100% - var(--number));
    position: relative;
    background: #efe7dd url(https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg) repeat;
 }

JavaScript

$('textarea').on({input: function(){
    var totalHeight = $(this).prop('scrollHeight') - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
    $(this).css({'height':totalHeight});
    $('.conversation').get(0).style.setProperty("--number",totalHeight+'px')
}
});