How can I do two input boxes in the same line in my product page?

Technical Q&A
,

Topic summary

Goal: Add two inline dropdown inputs on a Shopify product page (using Custom Liquid) under the heading “PESO.”

Requirements:

  • First dropdown labeled “kilograms” on the left (outside the box), values 0–10, required.
  • Second dropdown labeled “grams” on the left (outside the box), values 0–999, required.
  • Both inputs must sit on the same line and match the existing fields’ style (shape, color, font).

Context: Prior attempts (with generated code) altered the appearance from the site’s current styling, so maintaining consistent theme is critical.

Assets: A mockup image is provided to illustrate layout and labels.

Status: Seeking CSS/HTML guidance for side-by-side layout and theme-consistent styling via Shopify’s Custom Liquid. No solution or code accepted yet; discussion remains open.

Summarized with AI on December 28. AI used: gpt-5.
1

Ok, so thanks to this precious community I’ve been able to create some text boxes, dropdowns, date boxes, etc for my product page using the custom liquid code boxes.

Now I need to create the last part. Ive done a little drawing:

IMAGEN SHOPIFY.png
IMAGEN SHOPIFY.png988×862 24.1 KB

Two text boxes on the same line that are drop downs.

First box should have the words kilograms on the left outside and second box should have the word grams on the left outside. Kilograms dropdown should go from 0 to 10 and grams dropdown should go from 0 to 999. Both should be required fields.

Both boxs should be under the headline PESO.

The most important thing for me is that this share the same format as the other boxes. Ive tried coding something with GPT but then when i paste it the shape of the boxes is different, the color, the font, etc…