I need each row to have same height - css

Question

I need to make divs look like table data, I have used display: table-cell and display: table properties but i didn't get expected layout. I need each row to have same height.
please check below code
.publishers {
margin: 45px 0;
margin-right: 60px;
}
.publishers .col-xs-6:nth-child(odd) .publisher {
margin-right: -10px;
}
.publishers .col-xs-6:nth-child(even) .publisher {
margin-left: -10px;
}
.publishers .publisher {
background-color: #f1efef;
margin-bottom: 10px;
}
.publishers .publisher .media {
padding: 10px;
}
.publishers .publisher .media .media-left img {
width: 128px;
height: 128px;
}
.publishers .publisher .media .media-body h3 {
font-size: 30px;
font-weight: 400;
}
/***** my try *****/
.publishers{
display:table;
}
.publishers .publisher{
display: table-cell;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<section class="publishers">
<div class="row">
<div class="col-xs-6">
<div class="publisher">
<div class="media">
<div class="media-left">
<a style=" height: 131px; display: block;" href="http://www.cengage.com
">
<img style=" height: auto;" src="Publishers/7726f4a3-b23d-4af1-879d-57da2a567bd1.jpg" alt="...">
</a>
</div>
<div class="media-body">
<a href="http://www.cengage.com
"><h3>Cengage</h3></a>
<p class="description">A company that delivers highly..
</p>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="publisher">
<div class="media">
<div class="media-left">
<a style=" height: 131px; display: block;" href="http://www.elsevier.com
">
<img style=" height: auto;" src="Publishers/b3723614-ea79-4b24-a9fb-ae0c1da9a3c4.png" alt="...">
</a>
</div>
<div class="media-body">
<a href="http://www.elsevier.com
"><h3>Elsevier </h3></a>
<p class="description">A world’s leading publisher of science and health information serves more than 30 million scientists, students and health and information professionals worldwide
</p>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="publisher">
<div class="media">
<div class="media-left">
<a style=" height: 131px; display: block;" href="http://eu.wiley.com/WileyCDA/Section/index.html
">
<img style=" height: auto;" src="Publishers/ff9e4261-36a1-4cd3-bf9c-c169ff8661eb.png" alt="...">
</a>
</div>
<div class="media-body">
<a href="http://eu.wiley.com/WileyCDA/Section/index.html
"><h3>WILEY</h3></a>
<p class="description">Wiley is a global publisher of print and electronic products, textbooks, and other educational materials, for students both undergraduate and postgraduate, specializing in scientific, technical, and medical books and journals; professional and consumer books and subscription services. Wiley has approximately 22,700 active titles and 400 journals, and publishes 2000 new titles in a variety of print and electronic formats each year
</p>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="publisher">
<div class="media">
<div class="media-left">
<a style=" height: 131px; display: block;" href="https://www.pearson.com/
">
<img style=" height: auto;" src="Publishers/d18fbae5-1587-4b06-a0e4-8b0b1ec4ab13.jpg" alt="...">
</a>
</div>
<div class="media-body">
<a href="https://www.pearson.com/
"><h3>Pearson</h3></a>
<p class="description">Global leader in educational publishing offers comprehensive range of educational programs, in all subjects, for every age and level of student, from preK-12 through higher education and on into professional life.
</p>
</div>
</div>
</div>
</div>
</div>
</section>

Answer 1

.publishers .row {
display: flex;
}
If you don't need IE9 and below support you can use flex this by default uses align-items: stretch which makes all the children full height

Answer 2

If content is static then u can take height of longest div and assign to all.
If content is dynamic then:
$(document).ready(function() {
var maxHeight = -1;
$('.features').each(function() {
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
$('.features').each(function() {
$(this).height(maxHeight);
});
});

Answer 3

You could loop through each of the .features, find the max then apply that height to all blocks of the same class.
$(document).ready(function() {
var blockHeights;
blockHeights = [];
$('.features').each(function() {
blockHeights.push($(this).height());
});
$('.features').height(Math.max.apply(Math, blockHeights));
});
If you load your content through ajax or some other method after document ready simply move this into a function and call that when ready.
Probably worth setting a height (or height:auto) on the block as a style incase java script is off or doesn't load correctly, just to ensure the content is always visible.

Answer 4

You were almost there. display:table works. The problem is that your bootstrap is adding float to your divs, which break the table. Add in your css float:none; and it will work. Jsfiddle for example : http://jsfiddle.net/42dy9aLm/