How to place inputs side by side in HTML

In this article you will learn how to place inputs side by side, and not just this HTML element but any other you want in an easy way.

Hey you programmer, how are you? Let’s learn something new!

When we insert two inputs into an HTML, they are separated by a small spacing.

And if you inspect the HTML there is no margin or padding between them, so how can we eliminate this spacing?

The easiest way to solve this problem is to add a float to elements with a value of left

This way the two elements will be united, without this spacing

Let’s see a practical example:

<!DOCTYPE html>
<html>
 <head>
  <title>Deixando inputs lado a lado</title>
  <meta charset="utf-8">
 </head>
<body>
 <div>
  <input type="text" name="name" placeholder="Name">
  <input type="text" name="lastname" placeholder="Lastname">
 </div>
</body>
</html>

Let’s say we want to separate first and last name into two inputs, because our database is like this

| Do you want to specialize in Web Development? Take a look at our course catalogue.

But we want to give you an idea that these two data are the same thing, joining the inputs

So, let’s see what is returned on the page:

how to place inputs side by side example

Well, we have the behavior mentioned, now let’s go to CSS to adjust this, check it out:

input {
 float: left;
 border: none;
 padding: 10px;
 width: 200px;
}

div {
 border: 1px solid #CCC;
 height: 35px;
 width: 440px;
}

And now we have the following result:

And so we solve our problem in a very elegant way

Conclusion

In this article we saw how to place inputs side by side

We just need to add a float with a left value to the CSS, and the inputs will be close together.

This goes for other elements too!

The problem happens because it has an inline-block display, which makes it a separate block from the other, then it creates that space where there is no margin or padding

Want to learn more about HTML and CSS? Click here!