JSFiddle - React, Tailwind, and code Playground

by Rational Rabbit

HTML

<body>
   <div class="table">
      <div class="row">
         <div class="col col-sm">
             <div class="thumbnail">Thumbnail</div>
         </div>
         <div class="col col-lg">
             <textarea>Text area</textarea>
         </div>
      </div>
      <div class="row">
         <div class="col col-sm">
             <div class="thumbnail">Thumbnail 2</div>
         </div>
         <div class="col col-lg">
             <textarea>Text area 2</textarea>
         </div>
      </div>
   </div>
</body>

CSS

* {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.table {width:500px; height:100%px; border:1px dashed blue;}
.row {height:200px;}
.col {float:left; border:1px dashed #FF0000; padding:5px; vertical-align:top; height:100%;}
.col-sm {width:30%;}
.col-lg {width:70%; height:90%;}
.thumbnail {height:150px; width:100%; border:1px solid green;}
textarea {height:100%; width:100%;}