JSFiddle - React, Tailwind, and code Playground

by JThomas

HTML

<div id="header">Head</div>
<div class="col-layout">
<div style="background-color: blue;" class="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra ultricies eros ac pulvinar. Nullam quis rutrum nunc, sed accumsan nisi. Vivamus ante tellus, lobortis at accumsan quis, iaculis sit amet velit. Donec fermentum mi cursus odio scelerisque, at vulputate orci rutrum. Donec scelerisque at dui non vehicula. Maecenas imperdiet lectus metus, a ullamcorper nunc iaculis sit amet. Mauris tincidunt elit sed elit elementum, placerat condimentum lectus ornare. Morbi lobortis quis sem sed ornare. Maecenas scelerisque aliquam tortor, sed mollis augue dictum dignissim. Maecenas vestibulum orci ac ullamcorper mollis. Nulla ullamcorper rutrum felis, rutrum gravida justo. Nulla sollicitudin justo nec lorem egestas imperdiet. Pellentesque neque arcu, porttitor nec massa vel, tincidunt fringilla augue. In in hendrerit nisi, in varius odio. Morbi egestas, massa at consectetur hendrerit, neque elit sollicitudin mi, facilisis placerat erat quam at leo. Nullam lorem nibh, laoreet sit amet odio sit amet, congue semper mauris.</div>
<div style="background-color: red;" class="col2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra ultricies eros ac pulvinar. Nullam quis rutrum nunc, sed accumsan nisi. Vivamus ante tellus, lobortis at accumsan quis, iaculis sit amet velit. Donec fermentum mi cursus odio scelerisque, at vulputate orci rutrum. Donec scelerisque at dui non vehicula. Maecenas imperdiet lectus metus, a ullamcorper nunc iaculis sit amet. Mauris tincidunt elit sed elit elementum, placerat condimentum lectus ornare. Morbi lobortis quis sem sed ornare. Maecenas scelerisque aliquam tortor, sed mollis augue dictum dignissim. Maecenas vestibulum orci ac ullamcorper mollis. Nulla ullamcorper rutrum felis, rutrum gravida justo. Nulla sollicitudin justo nec lorem egestas imperdiet. Pellentesque neque arcu, porttitor nec massa vel, tincidunt...

CSS

.col-layout {
    display: table;
}

.col-layout [class^="col"]{
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
    display:table-cell;
}

.col-layout .col1 {
    width: 33.3%;
}
.col-layout .col2 {
    width: 66.6%;
    min-height: 100%;
}
.col-layout .col3 {
    width: 100%;
}