JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabl3" class="container table-content hidden-xs">
    <div class="row heading">
      <div class="col-sm-12">
        <h2>Резервные копии сайта</h2>
        <p>Запас места на диске позволяет не только загружать больше контента в лучшем качестве,
        но и увеличивает устойчивость сайта за счет большего срока резервного копирования всех данных.</p>
      </div>
    </div>
    <div class="row match">
      <div class="col-sm-2" style="height: 340px;">
        <div class="type ta"><p>тип хостинга</p></div>
        <div class="price ta"><p>стоимость</p></div>
        <div class="params ta"><p>срок хранения<br>резервных копий</p></div>
      </div>
      
      
      <div class="col-sm-2" style="height: 340px;">
        <div class="type"><img src="/wp-content/themes/wideteplate/support/compare-widestudio.png"></div>
        <div class="price">500 <i>руб./мес.</i></div>
        <div class="params">
          <span class="hdd-space">до 30 дней</span>
        </div>
      </div>
      
      
      <div class="col-sm-2" style="height: 340px;">
        <div class="type"><img src="/wp-content/themes/wideteplate/support/compare-standart.png"><br>
        Обычный хостинг</div>
        <div class="price">≈ 260 <i>руб./мес.</i></div>
        <div class="params">
          <span class="hdd-space">до 7 дней</span>
        </div>
      </div>
      
      
      <div class="col-sm-2" style="height: 340px;">
        <div class="type">Потребности<br>
        интернет-магазина<br>
        с базой в <b>1000</b> товаров</div>
        <div class="price">—</div>
        <div class="params">
          <span class="hdd-space">—</span>
        </div>
      </div>
      
      
      <div class="col-sm-2" style="height: 340px;">
        <div class="type">Потребности<br>
        интернет-магазина<br>
        с базой в <b>10 000</b> товаров</div>
        <div class="price">—</div>
        <div class="params">
          <span class="hdd-space">—</span>
        </div>
      </div>
...

CSS

.row {
  overflow: hidden;
}
.row .col-sm-2 {
  width: 16.66666%;
  float: left
}
.table-content .row .col-sm-2 {
	transition: all 0.2s;
	-moz-transition: all 0.2s;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
}
.table-content .row .col-sm-2:hover {
	-webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.5);
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
  }
.table-content .row .col-sm-2 div {
  padding: 20px;
  height: 100px;
  border-bottom: 1px solid #000;
}
.table-content .row .gray {
  background: gray;
}

JavaScript

$(document).ready(function(){
    $('.table-content .col-sm-2 > div').hover(
    function(){ //over
    	var ind = $(this).index()
    	$(this).closest('.table-content').find('.col-sm-2').each(function() {
      	$(this).find('>div').eq(ind).addClass('gray');
      });    	

    },
    function(){ //out
			var ind = $(this).index()
    	$(this).closest('.table-content').find('.col-sm-2').each(function() {
      	$(this).find('>div').eq(ind).removeClass('gray');
      }); 
    }
); 
});