Можно установить блокам максимальную высоту. Тогда они будут одинаковые по высоте. тоже можно сделать и с шириной.

Flex-box тоже хорошее решение если нужны блоки одинаковой высоты. Подробнее можно почитать тут: html5book.ru/css3-flexbox

Ну или же Js. Я так понимаю тебе нужен equal height. Тут есть 2-а варианта. Существует библиотека на jquery: https://github.com/mattbanks/jQuery.equalHeights или же можно воспользоваться кодом из этого урока: https://www.youtube.com/watch?v=z34QdUtXPD4

Нашел решение с помощью display: inline-block.
Нужно было сделать так:

.wrapper li{
display: inline-block;
vertical-align: middle;
margin: 10px 5px;
}


После того как я добавил vertical-align: middle; у меня блоки в которых больше текста стали вести себя как нужно и всё выровнялось. Думаю если добавить EqualHeight.js-master то будет еще лучше, но это не является моей целью. Вот конечный результат https://jsfiddle.net/zuhkLtfd/ Всем спасибо =)

https://jsfiddle.net/6L44xv1k/2/ Так?

https://jsfiddle.net/z7762hko/ ??? О_о