JSFiddle - React, Tailwind, and code Playground

by Fewfre

HTML

<div id ="parent" class="cont">
    <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="text"><textarea></textarea></div>
</div>

CSS

#parent{
    width: 400px;
    height: 300px;
    background-color:blue;
}
textarea {
    -webkit-box-flex: 1;
                -moz-box-flex: 1;
                -ms-box-flex: 1;
                box-flex: 1;
    width: 100%;
    height: 100%;
}

.cont{
 display: -webkit-box;
              display: -moz-box;
              display: -ms-box;
              display: box;
              -webkit-box-orient: vertical;
              -moz-box-orient: vertical;
              -ms-box-orient: vertical;
              box-orient: vertical;
              width: 100%;
              height: 100%;   
}
#text{
    display: -webkit-box;
                display: -moz-box;
                display: -ms-box;
                display: box;                
                -webkit-box-orient: horizontal;
                -moz-box-orient: horizontal;
                -ms-box-orient: horizontal;
                box-orient: horizontal;
                
                -webkit-box-flex: 1;
                -moz-box-flex: 1;
                -ms-box-flex: 1;
                box-flex: 1;
    
    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();        
});