JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

    <div class="product">
     <div class="wrap-product">
     товар 1
     </div>

<div class="hover-product">
это выезжает
</div>
    </div>
   
<div class="product">
     <div class="wrap-product">
     товар 2
     </div>

<div class="hover-product">
это выезжает
</div>
    </div>
    
<div class="product">
     <div class="wrap-product">
     товар 3
     </div>

<div class="hover-product">
это выезжает
</div>
    </div>
   

</body>
</html>

CSS

.product {
  background: #fff;

  display: inline-block;
  z-index: 10; }

.wrap-product {
  width: 100px;
  height: 150px;
  background-color: #fff;
  border: 1px solid blue;
  margin: 5px;
  margin-bottom: 0px;
  padding: 10px;
}

.hover-product {
  background-color: red;
  border: 1px solid blue;
  width: 120px;
  height: 50px;
  display: none;
  margin-left: 5px;
  }
  
  .product:hover .hover-product {
    display: block;
  position: absolute; }