Input fields to start at the same x axis

Hi,

so I have done this:
image

I want the input fields to be paralel with each other but I have failed to do it.

What have I tried? I tried to move them using “margin: 0 0 0 Npx” but that would be a bad choice if I had more input fields + I would have to reorganise everything for the mobile width version.

image

Please give me a hint.

Sincerely,
a proud newbie.

Hi @karlojeli there are a variety of ways to accomplish this. It’s hard to say what might make the most sense without seeing your current HTML structure, but a simple solution is just to wrap your text labels with a consistent width (i.e. width: 300px;), and adjust to your liking.

Slightly more complicated - but something to consider - is your general layout (you could use columns, flex box, grid, etc), but perhaps that’s for later on!

Thank you for your reply but that is not what I am seeking. The problem is not in the text labels but in the input fields, I want the first two to start at the blue line.

Flex box might do it, but I will try with grid. Thank you for your reply.
When I find the solution, I will share it with the community.

Right, if you give the text labels the same width, the input fields will be aligned at the blue line.

Depending on your setup, you might need to wrap each label in a <span> to give it width.

when you ask for help please provide a link to your project, the answer will always depends on your code, there may be different solutions here, depending on if you have nested input in the label, if they are not nested, etc