Dawn Theme Varient elements rearrange side by side

[uriWebfusion]

Hi all,

I’m a shopify builder & frontend dev using “Dawn” theme.

Inside “product-form__input” class there are 3 elements:

legend, input and label.

On Mobile view only:

I want them to aligned horizontally (Side by side). Attached image.

Here’s what I tried:

inside “legend”, “input” and “label” I added:

display: inline-block

position: relative;

margin: 0;

inside “legend”, “input”:

padding: 0;

inside “legend”:

width: 15%

inside input: width 5%

inside label: width 40%;

I even tried display flex at the parent “product-form__input” class and to align them horizontally

None of those works

I think that at the “legend” element there is a problem that it occupy the whole width block.

link to website

Password: 1234

Choose any product. The problem is in the product page.

Attached an image with the suspected “legend” element.

Thanks for helping !

P.S. : Maybe I should edit the liquid file ?

[Ujjaval]

Add below css into base.css file :

.product__info-container>*+* {display: flex;}

[Dan-From-Ryviu]

Hi @uriWebfusion , you can do that by adding CSS code below in your store admin > Sale channels > Online store > Themes > Edit code > Assets > base.css

.product .product-form__input {
display: flex;
align-items: center;
}
.product fieldset.product-form__input .form__label, 
.product .product-form__input label { float: right; }

This is result

[uriWebfusion]

This is an elegant solution. Thank you very much. I forgot all about the float