Left align form labels, inputs also left aligned

Question

So I'm trying to create a pretty form with labels. The aim is for all the labels to be inline with the inputs, while being left aligned. Because I also want to inputs to be left aligned, the space between each label and input is different.

Any help would be appreciated. Thanks as always, much obliged.

Answer 1

Set the width of your labels to be the same and all your inputs will be aligned

label {
    display: inline-block; //So that we can set the width
    width: 40px; //Whatever the widest label will be.
}

This can cause some issues if you add longer labels, you may need to adjust the width so that it doesn't overflow.