JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<ul>
<li>
<div class="item">
<div class="item_img">
<a href="#"><img src="http://placehold.it/300x200"></a>
</div>
<div class="item_info">
<h3 class="item_title">Ullamcorper Nibh Parturient</h3>
<p class="item_text">Morbi leo risus, porta ac consectetur at eros. Maecenas sed diam eget risus varius blandit sit amet non magna. Duis mollis, porttitor ligula, eget lacinia odio sem nec elit. </p>
<div class="item_border"></div>
</div>
<div class="informer ">
<span class="informer_date">17 january, 2012</span>
<a href="" class="informer_comments">15</a>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item_img">
<a href="#"><img src="http://placehold.it/300x200"></a>
</div>
<div class="item_info">
<h3 class="item_title">Condimentum Ultricies Ullamcorper</h3>
<p class="item_text">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur fermentum.
</p>
<div class="item_border"></div>
</div>
<div class="informer clearfix">
<span class="informer_date">15 January, 2012</span>
<a href="" class="informer_comments">21</a>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item_img">
<a href="#"><img src="http://placehold.it/300x200"></a>
</div>
<div class="item_info">
<h3 class="item_title">Nibh Fusce Parturient Tristique</h3>
<p class="item_text">Nulla vitae libero, augue. Curabitur blandit tempus porttitor. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia...
CSS
.wrapper {
max-width: 970px;
height: 100%;
margin: 0 auto;
vertical-align: top;
}
.wrapper ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.wrapper li {
display: inline-block;
vertical-align: middle;
margin: 10px 5px;
}
.item {
max-width: 300px;
border: 1px solid #E8E8E8;
background-color: #F7F7F7;
margin: 0 auto;
}
.item_img img {
max-width: 100%;
height: auto;
}
.item_info {
padding: 0 20px;
padding: 16px 18px;
padding-bottom: 0px;
color: #777;
font-size: 12px;
min-height: 50px;
text-align: left;
}
.item_title {
margin: 0px;
margin-bottom: 10px;
font-size: 15px;
font-family: "AllerBd", sans-serif;
}
.item_text {
line-height: 1.52em;
font-size: 13.4px;
margin-bottom: 18px;
font-family: "DroidSans", sans-serif;
}
.item_border:after {
content: "";
display: block;
height: 1px;
width: 98.5%;
margin: 0px auto;
}
.item_border:before {
content: "";
display: block;
height: 1px;
width: 100%;
margin-bottom: 2px;
}
.informer {
position: relative;
bottom: 0px;
height: 40px;
padding: 12px 17px;
color: #999;
font-size: 11px;
}
.informer_date, .informer_comments {
display: block;
line-height: 16px;
font-family: "DroidSans", sans-serif;
}
.informer_date {
padding-left: 22px;
float: left;
position: relative;
}
.informer_date:after {
display: block;
width: 14px;
height: 9px;
line-height: 9px;
content: "17";
font-size: 8px;
text-align: center;
position: absolute;
left: 0px;
bottom: 2px;
}
.informer_comments {
text-decoration: none;
color: #999;
float: right;
padding: 0px 5px 0px 22px;
}
JavaScript
function heightBlock(){
$(".wrapper").each(function () {
var blockCount = Math.floor($(this).width() / $(this).find("li").width());
var items = [];
var height = 0;
var i = 0;
$(this).find(".item_info").css("height", "auto");
if (blockCount == 1) return;
$(this).find("li").each(function () {
if (i % blockCount == 0 && i > 0) {
for (var key in items) {
$(items[key]).find(".item_info").height(height);
}
items = [];
height = 0;
}
console.log(height);
var _height = $(this).find(".item_info").height();
if (_height > height) {
height = _height;
}
items.push(this);
i++;
});
for (var key in items) {
$(items[key]).find(".item_info").height(height);
}
});
};
$(document).ready(heightBlock);
$(window).load(heightBlock);
$(window).resize(heightBlock);