Aligning two inputs in HTML/CSS

What is considered best practice for aligning two inputs with CSS?

My code so far: https://codepen.io/zinzc/pen/rNeeJjg

From a ux perspective, I’d say one field is the easiest. Then leave it up to the dev to parse it. But if it must be separate then side-by-side is ideal.

It will probably pass with one field and it’s easier. I just want to know for my own learning what is the best practice code for aligning two items (in this case inputs) side-by-side.
But, Thanks for the reply :grinning:

What do you mean by best practice? Are you just asking how to do it?

I’d likely just put the two input elements inside the same parent container and set the container to use flexbox.

<div class="flex">
  <input type="text" id="name" name="name-input" class="slight-left" placeholder="First Name">
  <input type="text" id="lastName" name="lastName-input" class="slight-left" placeholder="Last Name">
</div>
.flex {
  display: flex;
}

Also, don’t try to place elements using fixed margins it doesn’t work, at least not for a responsive design. Use margin to push elements apart and create space, not to place elements at some specific location.

1 Like

Thanks! Also, sorry for my unclarity. I meant what way would cause the least unnecessary coding (to avoid just moving it around with margins etc.). :slightly_smiling_face:

No problem.

I was just asking because with forms best practice often has to do with accessibility. Which is something else you need to account for, i.e. you need to have labels for the inputs.