How to float a <label> to the left of an <input>? ¶

<div class="field">
    <label>Test</label>
    <input type="text">
</div>

.field {
    display: table;
    width: 100%;
}

.field > label,
.field > input {
    display: table-cell;
}

.field > input {
    width: 80%;
}

or

.field {
    display: table;
    width: 100%;
}

.field > label,
.field > input {
    display: table-cell;
}

.field > label {
    text-align: right;
    font-weight: bold;
    padding-right: 8px;
}

.field > label:after {
    content: ':';
}

.field > input {
    width: 80%;
}

Credits:

https://stackoverflow.com/questions/32217349/how-to-float-a-label-to-the-left-of-an-input#32217404