I solved it. See the new screenshot. I did it by adding 3 different css classes: bottomaligned, bottomright and bottomleft, so each link now has a different css class.
.bottomaligned {position:absolute; bottom:0; margin-bottom:7px; left: 0;}
.bottomright {position:absolute; bottom:0; margin-bottom:7px; margin:7px; right: 0;}
.bottomleft {position:absolute; bottom:0; margin-bottom:7px; left: 100px;}
.fixedheight { height: 200px; width: 243px; position:relative; border:1px solid;}
This is how the template now looks:
<div class="col-lg-3 col-sm-4 col-6 fixedheight ">
<div>
<div >
<span class="bottomleft"><%= link_to 'edit', edit_product_path(product), class: "btn btn-danger" %></span>
<span class="bottomright"><%= button_to "Delete", product, data: {confirm: 'Are u sure?'}, method: :delete, class: "btn btn-danger" %></span>
<span class="bottomaligned"> <%= button_to "Add to cart", order_items_path(product_id: product) %></span>
</div>
<hr>
</div><!-- /.col-lg-3 -->
The new screenshot: