JSFiddle - React, Tailwind, and code Playground

HTML

<!-- equal_cols -->
<div id="equal_cols">
    <div class="largeleft">
        <div class="inner">

        <img style="padding: 5px; margin: 10px; float: right; border: 1px solid #ccc;" src="http://placeimg.com/205/126/any" width="205" height="126" alt="image" />
        <h2>Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis auctor metus, sit amet sollicitudin elit imperdiet sit amet.</p>
        <div class="alignlink"><a class="greybg" href="#">Read more</a>  
            </div>
        </div>
    </div>
    <div class="col10px"></div>
    <div class="smallright">
        <div class="inner">
        <h2>Heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis auctor metus, sit amet sollicitudin elit imperdiet sit amet. Nunc laoreet leo nec sem porta scelerisque. In vestibulum fermentum metus, mattis placerat orci ornare quis. Maecenas vitae accumsan tellus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis auctor metus, sit amet sollicitudin elit imperdiet sit amet. Nunc laoreet leo nec sem porta scelerisque. In vestibulum fermentum metus, mattis placerat orci ornare quis. Maecenas vitae accumsan tellus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis auctor metus, sit amet sollicitudin elit imperdiet sit amet. Nunc laoreet leo nec sem porta scelerisque. In vestibulum fermentum metus, mattis placerat orci ornare quis. Maecenas vitae accumsan tellus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis auctor metus, sit amet sollicitudin elit imperdiet sit amet. Nunc laoreet leo nec sem porta scelerisque. In vestibulum fermentum metus, mattis placerat orci ornare quis. Maecenas vitae accumsan tellus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis auctor metus, sit amet sollicitudin elit imperdiet sit amet. Nunc...

CSS

.inner {position: relative; padding-bottom: 30px; border: 1px solid red;}
a.greybg {
	padding: 3px;
	background: #464646;
	color: #ffffff;
}
p {
	padding: 10px 20px;
	margin: 0;
	font-size: 0.875em;
}
div.alignlink {
	position: absolute;
	bottom: 10px;
	right: 10px;
	margin: 0;
	padding: 0;
}
.equal_cols {
	display: table;
	width: 798px;
}
.largeleft {
	display: table-cell;
	width: 500px;
	border: 1px solid #ccc;
	position: relative;
	padding: 0 0 30px 0; /*ensures enough room for absoutely positioned .greybg link*/
}

.col10px {
	display: table-cell;
	position: relative;
	width: 10px;
}
.smallright {
	display: table-cell;
	width: 288px;
	border: 1px solid #ccc;
	position: relative;
	padding: 0 0 30px 0; /*ensures enough room for absoutely positioned .greybg link*/
}

JavaScript

/* equal_cols with resize on timer */
jQuery.fn.equalSiblingHeights = function() {
	var maxHeight = 0;
	$(this).each( function()
    {
        if($(this).height() > maxHeight)
            maxHeight = $(this).height();
    });
    $(this).height(maxHeight);
}

$(function(){ 
    $(".inner").equalSiblingHeights();
});

// extras 
var i = 0; // log resizing
var id; // var for delaying resize script a tad
$(window).resize(function(n) {
    clearTimeout(id);
    id = setTimeout(doneResizing, 50);
});

function doneResizing(){
    $(".inner").css("height","auto").equalSiblingHeights();
     i++;
    console.log("Done resizing " + i);
}