JSFiddle - React, Tailwind, and code Playground

by Bryson Murray

HTML

<div class="container">container
    <div class="wrapper">wrapper
       <div class="content">content
         <p>
             lorem ipsum...
           </p>
           <div>
               <textarea></textarea>
           </div>
           <div id="MovedDiv">Move Me</div>
       </div>
    </div>
</div>

CSS

.container{
   
    background: blue;
    
    margin:10px;
    padding:10px;
}

.wrapper{
    display: inline-block;
    background:#f90;
    position:relative;
    margin:10px;
    padding:10px;
}
.content{
        position:relative;
    background:#DCFFC8;
    display: inline-block;
    margin:10px;
    padding:10px;
}
#MovedDiv{
    background: green;
    position:relative;
    top:0;
    left:250px;
    display: inline-block;
}


textarea{
    outline:none;
    resize: horizontal;
}

JavaScript

var $content  = $('.content'),
    $wrapper  = $('.wrapper'),
    $textarea = $("textarea");

function setContentHeight() {
    $wrapper.css('min-height', $content.height() + 40 );
}

$textarea.on("input change", function() { 
    $(this).height(1).height( this.scrollHeight );
    setContentHeight();
}).change();

setContentHeight(); 
$(window).on("resize", setContentHeight);