How to align the cart button?

Question

css

Hello.
The template has something like this

<div class="product-action">
  <div class="button-group">
    <div class="product-button-2">
      <a href="#" type="submit" data-toggle="tooltip" title="Add Cart"><i class="fa fa-shopping-cart"></i></a>
      <a href="#" data-toggle="tooltip" title="Wishlist"><i class="fa fa-heart-o"></i></a>
      <a href="#" data-toggle="tooltip" title="Compare"><i class="fa fa-signal"></i></a>
    </div>
  </div>
</div>

I need to wrap the Add Cart button in this form to transfer data to the cart.

<form class="product-button" onsubmit="return addToCart(event)">
  <input type="hidden" name="product" value="{{ sale.slug }}">
  <button type="submit" data-toggle="tooltip" title="Add Cart"><i class="fa fa-shopping-cart"></i></button>
</form>

as a result, I get as in the picture below

, but it should be like this,

how to make this small button for adding goods to the cart so that it does not break the design?
You can see here at the bottom of the page there is a block SALES BY CATEGORY in it this problem.