Best way to align input textbox next to labels

Hey all!

Fairly basic question here - but I’m trying to align my input textboxs next to my labels in the survey form question and I’m finding it difficult to find the best way to make the input sections all align at the same point.

I essentially want it to look like this

Name ----- name textbox>
Number – number textbox>
Age ------- age textbox>
Dropdown dropdown textbox>

Could someone give me some suggestions please?

Here is my freecodepen… https://codepen.io/CosmoFlight/pen/yLpxzGY

You could do something like this:

#name-label, #email-label, #number-label, #dropdown-label {
  position: relative;
}

#email, #number, #name, #dropdown {
  position: fixed;
  left: 850px;
  text-align: center;
}
1 Like

Hello @cosmoflightcoding ,

  • You can use margins to align them at the same line vertically.

I did it like this. Have a look. ( I adjusted each element differently because each label has a different content in it and it affects the width of the label.)

#number {
  margin-left: 62px;
  width: 162px;
}

#email {
  margin-left: 50px;
}

#name {
  margin-left: 50px;
}

select {
  width: 170px;
}
1 Like

@cosmoflightcoding
Welcome to the forum :people_hugging:
You can adjust your markup this way to achieve your desired result

<div class = "row">
      <div class = col-25>
        <label for="name" id="name-label">
          Name
        </label>
      </div>
      <div class = col-75>
        <input type="text" id="name" name="name" placeholder="your name" required>
      </div>
    </div>

Your CSS will look like this:
This command sets the width of `

containing the col-25 class to a fraction of the total width of the row
.

.col-25 {
  width: 25%;
  float: left;
  margin-top: 6px;
}
This command sets the width of `<div> containing the col-75 class to a fraction of the total width of the row <div>
.col-75 {
  width: 75%;
  float: left;
  margin-top: 6px;
}

This command sets the width of the tag you working with
input[type = text] {
  width : 100%;
}

This part ensures the text after each form element stays in place after the float command.
.row:after {
  content: "";
  display: table;
  clear: both;
}

For more information you can visit https://www.w3schools.com/howto/howto_css_responsive_form.asp

1 Like
  • Get rid of the <body> and <html> tags. In codepen, the html frame you write your html code is basically the body. All the code you should worry about in the html is part of the body. If you want to write in the html head, you can open the html frame options.
  • One of you labels is wrapping most of your elements, double check your html and make sure your closing tags are consistent(and they start with a slash /).
  • You should get rid of the <br> tags, its better to use margins instead.
  • It is good practice to wrap each label and its respective input field into a container div, to set them apart from other form fields. Another common practice is to wrap the label around its input field(if you rather not use a containing div).

Once you make those changes, it would be easier for you to put some shared css for the inputs/labels(best to use classes to target them) and style them as you please. The easier for you would be to set a straight values(like 120px width for label), but this makes your code less responsive. Flexbox is good way to style your elements with some shared appearance, but it can be also slightly harder to set properly as a newbie.

1 Like

This is a creative solution! I like this. Thank you very much :slight_smile:

Thanks bgb! That makes sense, I’m such a fool for trying to margin them all-together as obviously they would operate differently.

No worries, never think that you’re a fool. Noone is extremely smarter than the other. you didn’t have the experience but now you do. Keep learning.

Thank you very much! Another creative solution