JSFiddle - React, Tailwind, and code Playground

by Matt Felten

HTML

<div class="row">
    <div class="column">
        <div class="column-wrap">
            <p>Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo.</p>

            <p>Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

            <p>Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Maecenas faucibus mollis interdum.</p>

            <p>Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
    </div>
    
    <div class="images">
        <div class="image"><img src="http://placehold.it/200" width="200" height="200" /></div>
        <div class="image"><img src="http://placehold.it/400x200" width="400" height="200" /></div>
    </div>
</div>

CSS

.column {
    column-width:200px;
    -moz-column-width:200px;
    -webkit-column-width:200px;
    height: 200px;
    
    position: absolute;
    top: 0;
    left: 0;
}

.row {
    position: relative;
}

.images {
    display: table;
    height: 200px;
    width: auto;
}

.image {
    display: table-cell;
}

JavaScript

$('.row').each( function() {
    $(this).css('padding-left', $('.column').width() );
});