Arrange dropdown layout on products page

Site URL: https://wvcharge.squarespace.com/waev-charge-store/p/waev-charge-ev1

Is it possible to change the layout of the dropdown boxes on the products page so there is two per line rather than one under each other?

Is it also possible to make the text bold above the dropdown box?

Page example: https://wvcharge.squarespace.com/waev-charge-store/p/waev-charge-ev1 

Many thanks

You mean make 3 variants same line?

Ideally two variants per line, for example

Line 1: Charging Power / Connectivity 

Line 2: Installation / 

Line 3: Quantity

Try adding to Design > Custom CSS

@media screen and (min-width:992px) {
.ProductItem-details .product-variants {
    width: 100%;
}
.variant-option {
    width: 45% !important;
}
}

Perfect, thank you as always! Final request, is it possible to make the headings (Charging Power / Connectivity) bold/heavy please?

Use this CSS

.variant-option-title {
    font-weight: bold;
}

Thank you @tuanphan

Sorry @tuanphan, could you let me know the code to also make the "quantity" field bold?

14 hours ago, HG-Design said:

Sorry @tuanphan, could you let me know the code to also make the "quantity" field bold?

You mean Quantity text, number or quantity border?

Please see photo attached, the text: Quantity  - to be bold @tuanphan 

On 8/3/2022 at 4:02 PM, HG-Design said:

Please see photo attached, the text: Quantity  - to be bold @tuanphan 

Add to Design > Custom CSS

.quantity-label {
    font-weight: bold;
}

Thank you as always @tuanphan