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

Answer 1

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

HTML:

  title for dummy1:
  
  longer title for dummy2:
  
  even longer title for dummy3:
  

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