Child divs with equal height and wrapping - html

Question

I have a parent div with seven or more child divs within. I need to display 4 child divs across... the rest will wrap in subsequent rows of four divs each. I need the child divs to all have equal height, relative to the other three child divs that share the same row. The parent div is responsive as well, so it may end up displaying rows of 2 child divs across when the viewport is smaller.
display:inline-block does not solve this issue (unequal child div heights), and display:table-cell does not allow the child divs to wrap into subsequent rows. How can I accomplish my objectives?
Here is a very basic jfiddle: https://jsfiddle.net/hockey2112/3r2pL25v/
<div class="table">
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. This div has a little more information in it, and therefore it will be taller than the other divs.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="tablecell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
.table {font-size: 9px;}
.tablecell {display: inline-block;
width: 23%; border: 1px solid #ff0000; vertical-align: top;}

Answer 1

To extend my comment regarding the usage of flexbox:
With flexbox, aligning the height of the elements along the cross-axis is done automatically, since the default value of justify-content is stretch.
All you have to do, is to set display: flex; on the container element. You may also want to add flex-wrap: wrap; in order for the child elements to wrap into multiple rows.
Also, the default flex-direction is row, so you don't need to specify that.
To sum up, you need to use the following CSS style:
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 0 23%; /* grow = 1, shrink = 0, basis = 23% */
}