<div class="wrap">
	<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
	<p>bbbbbbbbbbbbbbbb</p>
	<p>cccccccccccccccccccccccccccccccccccccc</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>
<script>
$(function() {
	$('.wrap p').matchHeight();
});
</script>
* {
	box-sizing: border-box;
	word-break: break-all;
}
body {
	min-height: 100vh;
	margin: 10px;
	padding: 10vh 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.wrap::after { content: "";display: block;clear: both; }
.wrap p {
	width: 30%;
	background: #eee;
	padding: 15px;
	margin: auto;
	float: left;
}
.wrap p:not(:nth-child(3n)) {
	margin-right: 5%;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.