How can I position two form fields side by side?

[kristinejrb]

Hello! Can I ask how to make the 2 form field side by side?
I want the Delivery suburb and post code to be placed side by side

<div class="form-field">
<label class="Form-label">Delivery Suburb <span class="red-asterisk">*</span></label>
<input class="form-input form-input-placeholder"
type="text"
id="Delivery Suburb"
name="contact[delivey suburb]"
autocomplete="city"
aria-required="true"
aria-invalid="true"
required
>
</div>

<div class="form-field">
<label class="Form-label">Post Code <span class="red-asterisk">*</span></label>
<input class="form-input form-input-placeholder"
type="number"
id="Post Code"
name="contact[post code]"
autocomplete="postcode"
aria-required="true"
aria-invalid="true"
required
>
</div>

[GemPages]

Hello @kristinejrb ,

It's GemPages support team and glad to support you today. I would like to give you the recommendation to support you.

Let's try using this CSS code:

.form-field {
 display: inline-block;
}

You can add it to CSS file of the theme or theme.liquid file. If you add it to the theme.liquid, let's add before </head> with this code:

<style>
.form-field {
 display: inline-block;
}
</style>

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

[kristinejrb]

Hi @GemPages! I did the code but it applies to all form fields. I want it to be specifically applied to the 2 fields. Is that possible? Thank you!

[GemPages · Accepted solution]

Hello @kristinejrb ,

It is possible, you need to add a separate class for the form fields that you want to edit, for example (I added a class named form-field-inline for two form fields):

<div class="form-field form-field-inline">
<label class="Form-label">Delivery Suburb <span class="red-asterisk">*</span></label>
<input class="form-input form-input-placeholder"
type="text"
id="Delivery Suburb"
name="contact[delivey suburb]"
autocomplete="city"
aria-required="true"
aria-invalid="true"
required
>
</div>

<div class="form-field form-field-inline">
<label class="Form-label">Post Code <span class="red-asterisk">*</span></label>
<input class="form-input form-input-placeholder"
type="number"
id="Post Code"
name="contact[post code]"
autocomplete="postcode"
aria-required="true"
aria-invalid="true"
required
>
</div>

After that, you add CSS for this class:

.form-field-inline {
 display: inline-block;
}

Best regards,
GemPages Support Team