How do I evenly add space between a label and the input field regardless of length of text

Question

Let s say I have 10 input fields and before the input fields on the left side I have span tag that holds the text to indicate what the user should enter into the field   I did some stuff but I am unsure how to add space in between the span tag and the input field regardless of how big the text is    Like this

User · Answer

This can be accomplished using the brand new CSS display: grid (browser support)

HTML:

<div class='container'>
  <label for="dummy1">title for dummy1:</label>
  <input id="dummy1" name="dummy1" value="dummy1">
  <label for="dummy2">longer title for dummy2:</label>
  <input id="dummy2" name="dummy2" value="dummy2">
  <label for="dummy3">even longer title for dummy3:</label>
  <input id="dummy3" name="dummy3" value="dummy3">
</div>

CSS:

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

When using css grid, by default elements are laid out column by column then row by row. The grid-template-columns rule creates two grid columns, one which takes up 1/4 of the total horizontal space and the other which takes up 3/4 of the horizontal space. This creates the desired effect.

JS-FIDDLE

User · Answer

You can always use the  pre  tag inside the label  and just enter the blank spaces in it  So you can always add the same or different number of spaces you require   lt form gt   lt label gt First Name   lt pre gt Here just enter number of spaces you want to use I mean using spacebar to enter blank spaces  lt  pre gt   lt input type  text  gt  lt  label gt   lt label gt Last Name   lt pre gt Now Enter enter number of spaces to match above number of  spaces lt  pre gt   lt input type  text  gt  lt  label gt   lt  form gt    Hope you like my answer  It s a simple and efficient hack

User · Answer

You can use a table  lt table class  quot formcontrols quot   gt          lt tr gt           lt td gt               lt label for  quot firstName quot  gt FirstName  lt  label gt           lt  td gt           lt td  style  quot padding-left 10px  quot  gt               lt input id  quot firstName quot  name  quot firstName quot  value  quot John quot  gt           lt  td gt       lt  tr gt       lt tr gt           lt td gt               lt label for  quot Test quot  gt Last name  lt  label gt           lt  td gt           lt td  style  quot padding-left 10px  quot  gt               lt input id  quot lastName quot  name  quot lastName quot  value  quot Travolta quot  gt           lt  td gt       lt  tr gt   lt  table gt   The result would be  ImageResult

User · Answer

2019 answer  Some time has passed and I changed my approach now when building forms  I ve done thousands of them till today and got really tired of typing id for every label input pair  so this was flushed down the toilet  When you dive input right into the label  things work the same way  no ids necessary  I also took advantage of flexbox being  well  very flexible  HTML   lt label gt    Short label  lt input type  quot text quot  name  quot dummy1 quot    gt   lt  label gt    lt label gt    Somehow longer label  lt input type  quot text quot  name  quot dummy2 quot    gt   lt  label gt    lt label gt    Very long label for testing purposes  lt input type  quot text quot  name  quot dummy3 quot    gt   lt  label gt   CSS  label     display  flex    flex-direction  row    justify-content  flex-end    text-align  right    width  400px    line-height  26px    margin-bottom  10px     input     height  20px    flex  0 0 200px    margin-left  10px     Fiddle DEMO  Original answer  Use label instead of span  It s meant to be paired with inputs and preserves some additional functionality  clicking label focuses the input   This might be exactly what you want  HTML   lt label for  quot dummy1 quot  gt title for dummy1  lt  label gt   lt input id  quot dummy1 quot  name  quot dummy1 quot  value  quot dummy1 quot  gt    lt label for  quot dummy2 quot  gt longer title for dummy2  lt  label gt   lt input id  quot dummy2 quot  name  quot dummy2 quot  value  quot dummy2 quot  gt    lt label for  quot dummy3 quot  gt even longer title for dummy3  lt  label gt   lt input id  quot dummy3 quot  name  quot dummy3 quot  value  quot dummy3 quot  gt   CSS  label       width 180px      clear left      text-align right      padding-right 10px     input  label       float left     jsfiddle DEMO here

User · Answer

You can also used below code    lt html gt   lt head gt       lt style gt           labelClass              float  left              width  113px                 lt  style gt   lt  head gt   lt body gt     lt form action  yourclassName jsp  gt       lt span class  labelClass  gt First name   lt  span gt  lt input type  text  name  fname  gt  lt br gt       lt span class  labelClass  gt Last name   lt  span gt  lt input type  text  name  lname  gt  lt br gt       lt input type  submit  value  Submit  gt     lt  form gt   lt  body gt   lt  html gt

[forms] How do I evenly add space between a label and the input field regardless of length of text?

Examples related to forms

Examples related to css

Examples related to html