Inline align Woocomerce Product button with spinner counter

I am struggling to align my woocommerce product divi module button to a custom spinner counter.

What is clear is that the spinner counter is sitting outside the div container and so the inline alignment is not working because these need to be in the same div container.

Please refer to attached screenshot to see what I am referring to.

The website is www.kvelt.com - the button in question is at the bottom of the front page.

Regarding the code. I am using a woocommerce product module in Divi. This has dropdowns for selection and also a button to add to basket.

I have also created a custom counter that is currently sitting under the add to basket button - see code below.

HTML used to create the custom counter (not included but there is also javascript module to control the counter)

<div class="custom-counter-wrapper">
<div class="custom-spinner">
<button type="button" class="spinner-button minus">-</button>
<input type="number" class="spinner-input" value="1" min="1">
<button type="button" class="spinner-button plus">+</button>
</div>
<button type="button" class="single_add_to_cart_button button alt">Add to Basket</button>
</div>


The CSS used style

.et_pb_wc_add_to_cart form.cart .button, .et_pb_wc_add_to_cart form.cart div.quantity {
float: none!important;
display: inline-block;
vertical-align: middle;
}

.custom-spinner + .single_add_to_cart_button {
display: none !important;
}

.custom-spinner {
display: flex;
align-items: center;
}

.spinner-button.minus {
padding-left: 10px; /* Adjust as needed */
}

.spinner-button.plus {
padding-right: 10px; /* Adjust as needed */
}

.spinner-button {
background: none;
border: none;
color: #000; /* Set color to match your design */
font-size: 20px; /* Adjust the font size for the buttons */
cursor: pointer;
}

.spinner-input {
width: 37px; /* Adjust the width of the input */
height: 37px; /* Adjust the height of the input */
border: 1px solid #000; /* Black border */
text-align: center;
font-size: 16px; /* Adjust the font size */
padding: 5px 0; /* Adjust vertical padding */
margin: 0 5px; /* Add space between the input and buttons */
appearance: none; /* Remove default styling */
-webkit-appearance: none; /* For WebKit browsers */
-moz-appearance: textfield; /* For Firefox */
}