I am managing a website at
To better illustrate my request, I have attached an image showing what I want to accomplish. I would like the elements on the site to align seamlessly with the "in stock" notification.
https://i.sstatic.net/3qipq.jpg
This is the HTML code snippet:
<div class="single_variation_wrap" style="">
<div class="single_variation">
<p class="stock in-stock">Only 2 left in stock</p>
</div>
<div class="variations_button add-cart">
<div class="cart-number">
<span></span>
<div class="quantity">
<input type="number" step="1" name="quantity" value="1" title="Quantity" class="input-text qty text" size="4" min="1" max="2">
</div>
</div>
<button type="submit" class="button single_add_to_cart_button alt btn-block">
<i class="icon-cart2"></i>
Add to cart
</button>
</div>
<input type="hidden" name="add-to-cart" value="1726">
<input type="hidden" name="product_id" value="1726">
<input type="hidden" name="variation_id" value="1922">
</div>
Can someone suggest a CSS solution for this issue?
I attempted to use the following CSS code, but it did not produce the desired result:
.cart-number {float:left;display:inline-block;}