Can anyone help me with using the class=float-right on the button labeled "Add to cart"? It seems to be not aligning properly, especially when I increase the width of the card. The "Add to cart" button is sticking to the "Description" button instead of moving to the right corner along with the input field. Any suggestions on how to correct this alignment issue?
Here's an example at jsfiddle: https://jsfiddle.net/cvrg5ep0/
<html lang="eng">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
rel="stylesheet" media="screen"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card" style="width: 50rem; height: 28rem;"> <!-- width: 25rem -->
<div class="view overlay">
<img class="card-img-top" src="https://cdn.pixabay.com/photo/2018/10/05/23/24/chicken-3727097_1280.jpg"
style="width: 25rem; height : 18rem;" alt="Card image cap">
<div class="mask rgba-white-slight"></div>
</div>
<div class="card-body">
<div class="p-2">
<div class="float-right">
<h3 class="card-title"><span> 5000</span> $</h3>
</div>
<h2 class="card-title"><span>Chicken</span></h2>
<div class="row">
<form th:action="@{/products/{id}(id=${product.id})}" method="get">
<button type="submit" class="btn btn-light-blue">Description</button>
</form>
<div class="float-right">
<form class="add-prod-to-cart">
<div class="input-group">
<input type="hidden" class="product-id" th:value="${product.id}">
<input type="number" value="1" min="1"
class="product-quantity form-control col-md-3">
<div class="input-group-append">
<button type="submit" class="btn btn-danger">Add to cart</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div> <!-- card-body -->
</div> <!-- card -->
</body>
</html>