JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
<div class="col-md-3 col-sm-6">
     <div class="product-wrap">
          <div class="product-item">
               <div class="item-thumb">
                    <div class="product-photo">
                         <img src="/image" alt="">
                    </div>
               </div> <!-- /.item-thumb -->
               <div class="product-description-wrap">
                    <div>
                         <h3><a href=""> Очень длинное название продукта 1</a></h3>
                         <span>Цена: <em class="price">350 &#8381;</em></span>
                    </div>
               </div>
          </div> <!-- /.product-item -->
     </div>
</div> <!-- /.col-md-3 -->
<div class="col-md-3 col-sm-6">
     <div class="product-wrap">
          <div class="product-item">
               <div class="item-thumb">
                    <div class="overlay">
                        
                    </div> <!-- /.overlay -->
                    <div class="product-photo">
                         <img src="/image" alt="">
                    </div>
               </div> <!-- /.item-thumb -->
               <div class="product-description-wrap">
                    <div>
                         <h3><a href=""> Ещё более длинное название продукта 2</a></h3>
                         <span>Цена: <em class="price">350 &#8381;</em></span>
                    </div>
               </div>
          </div> <!-- /.product-item -->
     </div>
</div> <!-- /.col-md-3 -->
<div class="col-md-3 col-sm-6">
     <div class="product-wrap">
          <div class="product-item">
               <div class="item-thumb">
                    <div class="overlay">
                        
                    </div> <!-- /.overlay -->
                    <div class="product-photo">
                         <img src="/image" alt="">
                    </div>
               </div> <!-- /.item-thumb -->
               <div class="product-description-wrap">
                  ...

CSS

.col-md-3{
  width: 25%;
  float: left;
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
.product-wrap{
  transition: width .2s;
}
.product-item {
  margin-bottom: 30px;
  z-index: 0;
  position: relative;
  background: #fff;
}
.ptoduct-item:hover{
  box-shadow: 0 0 20px rgba(0, 0, 0, .5);
  /*border: 1px solid #56bd4b;*/
  border-radius: 3px;
  z-index: 1;
}
.product-item h3 {
  margin: 15px 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.product-item h3 a {
  color: inherit;
}
.product-item span {
  font-size: 14px;
}
.product-item span em {
  font-weight: 700;
  font-style: normal;
}
.product-item span em.price {
  color: #26b864;
}
.product-item span em.text-muted {
  color: #a3a7aa;
  text-decoration: line-through;
  font-weight: 600;
}
.price{
  font-size: 26px !important;
  color: #26b864;
  font-weight: bold;
}
.product-photo {
  position: relative;
  padding-bottom: 100%;
  overflow: hidden;
}
.product-photo img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  transition: transform .4s ease-out;
}
.product-item:hover .product-photo img {
  
}
.product-description-wrap:before {
  content: "";
  float: left;
  height: 100%;
  width: 100%;
}
.product-description-wrap div{
  position: relative;
  padding: 20px;
}
.product-item:hover .product-description-wrap-hover div{
  z-index: 1;
 
}
.product-item:hover .product-description-wrap h3{
  white-space: normal;
}