JSFiddle - React, Tailwind, and code Playground

HTML

<!--1 Column Photo-->
    <div class="section group content">
        <div class="col span_12_of_12">
            <img src="http://thekevbot.com/cdn/placeholder_1col.jpg" alt=""/>
        </div>
    </div>
    <!--2 Column Text Photo-->
    <div class="section group content">
        <div class="v-table col span_6_of_12">
            <div class="v-cell text-col">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis adipiscing dui, id tristique sapien. In hac habitasse platea dictumst. Nam molestie venenatis augue nec condimentum.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean eget mi id urna tincidunt rhoncus. Nam rutrum egestas neque quis semper. Vestibulum iaculis elit lacus, eget dignissim purus.</p>
            </div>
        </div>
        <div class="col span_6_of_12">
            <img src="http://thekevbot.com/cdn/placeholder_3col_1.jpg" alt=""/>
        </div>
    </div>
    <!--3 Column Photo-->
    <div class="section group content">
        <div class="col span_4_of_12">
            <img src="http://thekevbot.com/cdn/placeholder_3col_1.jpg" alt=""/>
        </div>
        <div class="col span_4_of_12">
            <img src="http://thekevbot.com/cdn/placeholder_3col_2.jpg" alt=""/>
        </div>
        <div class="col span_4_of_12">
            <img src="http://thekevbot.com/cdn/placeholder_3col_3.jpg" alt=""/>
        </div>
    </div>
    <!--2 Column Photo Text-->
    <div class="section group content">
        <div class="col span_6_of_12">
            <img src="http://thekevbot.com/cdn/placeholder_3col_1.jpg" alt=""/>
        </div>
        <div class="v-table col span_6_of_12">
            <div class="v-cell text-col">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis adipiscing dui, id tristique sapien. In hac habitasse platea dictumst. Nam molestie venenatis augue nec condimentum.Pellentesque habitant morbi...

CSS

.section {
    width:100%;
    clear: both;
    padding: 0px;
    margin: 0px;
    overflow:hidden;
}

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin:0;
}
.col:first-child { margin-left: 0; }

.col img{
    width:100%;
}


/*  GROUPING  */

.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}


/*  GRID OF TWELVE  */
.span_12_of_12 {
    width: 100%;
}

.span_11_of_12 {
    width: 91.66%;
}
.span_10_of_12 {
    width: 83.33%;
}

.span_9_of_12 {
    width: 75%;
}

.span_8_of_12 {
    width: 66.66%;
}

.span_7_of_12 {
    width: 58.33%;
}

.span_6_of_12 {
    width: 50%;
}

.span_5_of_12 {
    width: 41.66%;
}

.span_4_of_12 {
    width: 33.33%;
}

.span_3_of_12 {
    width: 25%;
}

.span_2_of_12 {
    width: 16.66%;
}

.span_1_of_12 {
    width: 8.333%;
}

html, body{width:100%; height:100%;}

.v-table{display:table; border:none;}
.v-cell{display:table-cell; vertical-align:middle; padding:0;}

/* COLUMN STYLES */

.text-col{
	width:80%;
	padding:5% 10%;
}

JavaScript

$(window).load(function(){
    var pageWidth = $(window).width();
    if (pageWidth >= 1048) {
       (function($) {
            $.fn.eqHeights = function() {
                var el = $(this);
                if (el.length > 0 && !el.data('eqHeights')) {
                    $(window).bind('resize.eqHeights', function() {
                        el.eqHeights();
                    });
                    el.data('eqHeights', true);
                }
                return el.each(function() {
                    var curHighest = 0;
                    $(this).children().each(function() {
                        var el = $(this),
                        elHeight = el.height('auto').height()-3;
                        if (elHeight > curHighest) {
                            curHighest = elHeight;
                        }
                    }).height(curHighest);
                });
            };
            $('.section').eqHeights();
        }(jQuery)); 
    };
});