Align form elements in CSS

Question

I\'m new to CSS and have a simple login form that I\'m trying to align correctly. Basically two columns with the labels and the Login button in one column and the t

Answer 1

You can also use the position property in CSS to align your label and input in certain specified way as you want. By this, they get arranged in accordance to the parent element.

form {
    position: relative;
    width: 70%;
    text-align: right;
}

label {
    width: 30%;
    position: absolute;
    left: 10%;
    text-align: right;
    margin-right: 30px;
}

input[type=submit] {
    position: absolute;
    left: 25%;
    background-color: #9AE5F8;
}

Here is the link to its jsfiddle.