JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<div class="row">
		<div class="fourcol">
			<div class="breakoutbox equal-blocks">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat. Delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
			</div>
		</div>
		<div class="fourcol">
			<div class="breakoutbox equal-blocks">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
			</div>
		</div>
		<div class="fourcol last">
			<div class="breakoutbox equal-blocks">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
			</div>
		</div>
	</div>
    <div class="row">
		<div class="fourcol">
			<div class="breakoutbox equal-blocks">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
			</div>
		</div>
		<div class="fourcol">
			<div class="breakoutbox equal-blocks">
				<p>Lorem congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
			</div>
		</div>
		<div class="fourcol last">
			<div...

CSS

.container 			{ padding-left: 32px; padding-right: 32px; margin:0 overflow: hidden; }

.row 				{ width: 100%; max-width: 1020px; min-width: 755px; overflow:hidden; margin:0 auto; padding:0; }

.fourcol			{ margin-right: 3.8%; float: left; min-height: 1px; }

.row .fourcol 		{ width: 30.75%; }

.last 				{ margin-right: 0px !important; }

.breakoutbox {
background-color: #E4E4ED;
margin-top: 32px;
padding: 24px;
border-bottom: 16px solid #6c5ea6;
}

.breakoutbox {
box-shadow: 0 16px 24px -16px rgba(153, 158, 160, 1);
-moz-box-shadow: 0 16px 24px -16px rgba(153, 158, 160, 1);
-webkit-box-shadow: 0 16px 24px -16px rgba(153, 158, 160, 1);
}

JavaScript

// Taken from http://css-tricks.com/examples/EqualHeightsInRows/
			
			// globals
			var currentTallest = 0,
			    currentRowStart = 0,
			    rowDivs = new Array();
			
			function setConformingHeight(el, newHeight) {
				// set the height to something new, but remember the original height in case things change
				el.data("originalHeight", (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight")));
				el.height(newHeight);
			}
			
			function getOriginalHeight(el) {
				// if the height has changed, send the originalHeight
				return (el.data("originalHeight") == undefined) ? (el.height()) : (el.data("originalHeight"));
			}
			
			function columnConform() {
			
				// find the tallest DIV in the row, and set the heights of all of the DIVs to match it.
				$('.equal-blocks').each(function() {
				
					// "caching"
					var $el = $(this);
					
					var topPosition = $el.position().top;
			
					if (currentRowStart != topPosition) {
			
						// we just came to a new row.  Set all the heights on the completed row
						for(currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
			
						// set the variables for the new row
						rowDivs.length = 0; // empty the array
						currentRowStart = topPosition;
						currentTallest = getOriginalHeight($el);
						rowDivs.push($el);
			
					} else {
			
						// another div on the current row.  Add it to the list and check if it's taller
						rowDivs.push($el);
						currentTallest = (currentTallest < getOriginalHeight($el)) ? (getOriginalHeight($el)) : (currentTallest);
			
					}
					// do the last row
					for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) setConformingHeight(rowDivs[currentDiv], currentTallest);
			
				});
			
			}
			
			
			$(window).resize(function() {
				columnConform();
			});
			
			// Dom Ready
			// You might also want to wait until window.onload if images are the things...