JSFiddle - React, Tailwind, and code Playground

by Artur Stambultsian

HTML

<div class="container">
    <div class="item one">
        <div class="image"></div>
        <div class="sign">Текст Текст Текст Текст Текст Текст Текст </div>
        <div class="price">123123</div>
    </div>
    <div class="item two">
        <div class="image"></div>
        <div class="sign">Текст Текст Текст Текст </div>
        <div class="price">123123</div>
    </div>
    <div class="item three">
        <div class="image"></div>
        <div class="sign">Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст sdfcgdsfgdfs gsdf gsdf gsdf gsdf gsd</div>
        <div class="price">123123</div>
    </div>
    <div class="item three">
        <div class="image"></div>
        <div class="sign">Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст sdfcgdsfgdfs gsdf gsdf gsdf gsdf gsd</div>
        <div class="price">123123</div>
    </div>
    <div class="item one">
        <div class="image"></div>
        <div class="sign">Текст Текст Текст Текст Текст Текст Текст </div>
        <div class="price">123123</div>
    </div>
</div>

CSS

.main_container {
    overflow: hidden;    
    border-bottom: 1px solid #000;
}
.container{
    display:block;
    padding:0px;
    margin:0px;
    width:900px;
    margin-left:auto;
    margin-right:auto;
    
}
.container.price_block {
    border-bottom: 1px solid #000;
}
.item {
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    margin-bottom: 10px;
}

.container>div{
    float: left;
    width:299px;
    padding: 0;
}
.image {
    width: 90%;
    height: 160px;
    border: 1px solid #000;
    margin: 20px auto;
}
.one{
    background-color:#effba7;
}
.two{
    background-color:#d9e2ab;
}
.three{
    background-color:#f2f4bd;
}
.sign {
    padding: 10px;
}
.price {
    padding: 10px;
}

JavaScript

/*Инициализируем массив, в котором будут храниться высоты всех элементов*/
var height=[];
/*Заполняем этот массив*/
$('.container .item').each(function(indx, element){
    height.push($(element).outerHeight());
});
/*Находим максимальный элемент массива (максимальную высоту)*/
var maxHeight = Math.max.apply({},height)
/*Присваиваем каждому элементу найденную высоту*/
$('.container .item').each(function(indx, element){
    $(element).height(maxHeight)
});