It's still not easy to make boxes in a row the same height with CSS alone when they have dynamic inner contents, they can't be a fixed height, and they need to be responsive.
Matchbox is a vanilla JavaScript plugin to help you do this. It does the work of matching each box to the tallest in its row, listens and responds to the resize event to keep your boxes the same height when inner content shifts around, and can be customized on the fly.
Let's look at a common example. Three boxes in a row, each with differently heighted inner content.
Matchbox is designed to match heights in groups of boxes, thus, each row of boxes will be adjusted separately.
Now, let's see it work with some actual content. Let's do a typical use case scenario. You have to display a set of items, each item with a photo and a small bit of text to go along with it. Let's add the challenge of changing how many items are in a row at different breakpoints.
