JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
    <div class="row">
        <div class="col col-sm">
            <div class="thumbnail">Thumbnail</div>
        </div>
        <div class="col col-lg">
            <div contenteditable='true' class='contenteditable'>Text area</div>
        </div>
    </div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.table {
    display: table;
    width: 100%;
    height: auto;
}
.row {
    display: table-row;
    height: 100%;
}
.col {
    display: table-cell;
    border: 1px dashed #FF0000;
    padding: 5px;
    vertical-align: top;
    height:100%;
}
.col-sm {
    width: 30%;
    }
.col-lg {
    width: 70%;
}
.thumbnail {
    height: 150px;
    width: 200px;
    border: 1px solid #CCC;
}

.contenteditable {
    width: 100%;
    height: 100%;
}

.contenteditable p{margin-top:0px; margin-bottom:0px;}