JSFiddle - React, Tailwind, and code Playground

HTML

<div id ="parent">
    <div id="images">
        <img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/20x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/120x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/50x20/cc5acc/fff.png" />
    </div>
    
    <div id="textarea-container">
        <textarea></textarea>    
    </div>    
</div>

CSS

* { margin:0; padding: 0 }

#parent{
    width: 400px;
    height: 300px;
    display: table;
    background: blue;
}
#images {
    display: table-row;
    height: 0;
}

#textarea-container {
    display: table-row;
}

textarea {
    height: 100%;
    width: 100%;
}

JavaScript

//for this demo, i made the width of the textarea = 80% so you can see that it does not stay within the bounds of #parent.  Textarea has the same height as #parent... 

//If i scale the width, the images will adjust lines.  I want the textarea to take up the remainder of the height + match the width.

$(function(){
    //$("#parent").draggable();        
});