Will they diverge according to the height of the product card?

Question

css

Hello. It is not possible to make the product cards the same size: https://jsfiddle.net/2b1Ldsyp/
As I understand it, this is due to the fact that the amount of text inside is different. How to make the cards have the same height and the gaps between them are the same.

Answer 1

Found a solution with display: inline-block.
It was necessary to do this:
.wrapper li{
display: inline-block;
vertical-align: middle;
margin: 10px 5px;
}
After I added vertical-align: middle; I have blocks in which more text began to behave as they should and everything aligned. I think adding EqualHeight.js-master would be even better, but that's not my goal. Here is the end result https://jsfiddle.net/zuhkLtfd/ Thanks everyone =)

Answer 2

display:flex;
align-items: stretch;
frontender.info/a-guide-to-flexbox/#codealignitemscode
https://jsfiddle.net/2b1Ldsyp/3/

Answer 3

"Spread out" - this is 5!
And the essence of the question: to simulate a table through display: table and display: table-cell
But if adaptive, then, of course, not an option

Answer 4

codepen.io/Geyan/pen/zKxZwQ?editors=1100 right?

Answer 5

After reading the replies and comments.
It can be solved with the EqualHeight.js-master plugin if jquery is already connected to the site.
It automatically increases the height of the block so that they are the same.

Answer 6

Use jquery.matchHeight.js