JSFiddle - React, Tailwind, and code Playground

by Aleksey Karagodnikov

HTML

<div class="tpvmthumb"><table border="0" cellpadding="0" cellspacing="0" width="920px"><tbody><tr>
<td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Norsjo</span><a title="Norsjo" href="#"><img src="http://placehold.it/100x100" alt="Norsjo" border="0" /></a>
	<span class="productPrice">6 900.00 </span>
</td>
<td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Steinkjore</span><a title="Steinkjore" href="#"><img src="http://placehold.it/100x100" alt="Steinkjore" border="0" /></a>
	<span class="productPrice">4 900.00 </span>
</td>
<td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Jack Flag</span><a title="Jack Flag" href="#"><img src="http://placehold.it/100x100" alt="Jack Flag" border="0" /></a>
	<span class="productPrice">5 200.00 </span>
</td>
<td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Isfjorden</span><a title="Isfjorden" href="#"><img src="http://placehold.it/100x100" alt="Isfjorden" border="0" /></a>
	<span class="productPrice">5 200.00 </span>
</td>
<td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Sordal</span><a title="Sordal" href="#"><img src="http://placehold.it/100x100" alt="Sordal" border="0" /></a>
	<span class="productPrice">4 500.00 </span>
</td>
<td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Fraktur III</span><a title="Fraktur III" href="#"><img src="http://placehold.it/100x100" alt="Fraktur III" border="0" /></a>
	<span class="productPrice">2 900.00 </span>
</td>
<td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">Спортивный к ...</span><a title="Спортивный костюм Halden" href="#"><img src="http://placehold.it/100x100" alt="Спортивный костюм Halden" border="0" /></a>
	<span class="productPrice">5 200.00 </span>
</td>
<td align="center" valign="top"><span style="font-weight:bold;" class="prodtit">кардиган</span><a title="кардиган"...

CSS

.tpvmthumb{
}

.tpvmthumb table{
	padding: 0px;
	margin: 0px;
}

.tpvmthumb table td{
	border:1px solid #ccc;
	padding-bottom:10px;
}

.tpvmthumb .pthumb{
}

.tpvmthumb a:link,
.tpvmthumb a:visited,
.tpvmthumb a:active{
	display: block;
	width: 100px;
	height: 100px;
	text-align: center;
	margin-top: 10px;
	background-color: #ffffff;
	border: 3px solid #ffffff;
}

.tpvmthumb a:hover{
	border: 3px solid #FFD24E;
}

.tpvmthumb a img{
	height: 100px;
}

.tpvmthumb span{
	display: block;
	color: #ffffff;
	text-align: left;
	line-height: 16px;
	padding: 5px 25px 5px 10px;
}

.tpvmthumb br{
	display: none;
}

.tpvmthumb .productprice{
	font-weight: bold;
	color: #ff6600;
}

.tpvmthumb .productPrice, .tpvmthumb .product-Old-Price{
	display: block;
	font-weight: bold;
	color: #191919;
	text-align: center;
	padding: 0px;
	margin-top: 5px;
	background: none;
}

.tpvmthumb .product-Old-Price{
	font-weight: normal;
	font-size: 11px;
	color: #969696;
	margin: 0px;
	margin-bottom: -10px;
	text-decoration: line-through;
}

.tpvmthumb .addtocart_button_module{
	margin-top: 5px;
}

JavaScript

var tpvmthumb = document.getElementsByClassName('tpvmthumb')[0],
    table = tpvmthumb.getElementsByTagName('table')[0],
    tr_list = table.getElementsByTagName('tr'),
    tr_count = tr_list.length;
for (i = 0; i<tr_count; ++i){
    var td_list = tr_list[i].getElementsByTagName('td'),
        td_count = td_list.length,
        span_max_heights = [],
        span_heights = [];
    for (j = 0; j<td_count; ++j) {
        if (j = 0) {
            span_heights = [];
        }
        var span = td_list[j].getElementsByTagName('span')[0];
        span_heights.push(span.clientHeight);
    }
    span_max_heights.push(Math.max(span_heights));
}
console.log(span_max_heights);