JSFiddle - React, Tailwind, and code Playground

by Vera

HTML

<div class="product-item ">
  		<div class="product-itemwrapper">
        <div class="product-wrapper">
          <div class="top">
            <figure class="product-foto">
                <a href=""><img src="" alt="product" /></a>
              <figcaption><a href="">Совушка-хайлайтерСовушка-хайлайтерСовушка-хайлайтер</a></figcaption>
            </figure>
          </div>
          <div class="bottom">
            <div class="productprice sale ">480.50 грн</div>
            <div class=" sale ">120.50 грн</div>
              <a href="" class="productbuy right">Купить</a>
          </div>
        </div>
      </div>
        <div class="product-itemwrapper">
          <div class="product-wrapper">
            <div class="top">
              <figure class="product-foto">
                  <a href=""><img src="" alt="product"/></a>
               
                <figcaption><a href="">Совушка-хайлайтер</a></figcaption>
              </figure>
            </div>
            <div class="bottom">
              <div class="productprice ">48 грн</div>
                <a href="" class="productbuy right">Купить</a>  
            </div>
          </div>
        </div>
    </div>

CSS

div.product-item{
  display: inline-block;
  margin-top:10px;
}
.product-itemwrapper{
  display: inline;
  
}
.product-wrapper{
border: 1px dotted #fff;
  margin:0 0 10px 0;
  padding: 10px;
  display: inline; 
  
}
div.product-wrapper:hover{
  border: 1px dotted #000;
}
.top{
  display: inline-block;
  width: 180px;
  vertical-align: top;
  margin-bottom: 60px;
  background-color: gray;   
}
.bottom{
  width: 180px;
  margin-left: -184px;
  display: inline-block;
  vertical-align:bottom;
  background-color: red;
  height: 65px;
}