Aligning without a table - html

Question

So, I understand that tables are the spawn of satan. How should I align this without a table?
I have a bunch of input fields, each with a label to the left of it, and I would like the left side of the input fields to be aligned. Bad ascii art follows:
name ________________
date of birth ________________
Shakespeare villain I would like to be ________________
favo(u)rite do(gh)nut ________________
pet's blood group ________________
mother's maiden name ________________
favo(u)rite Led Zeppelin track ________________
I don't need exact code, just to be told how to do it.
This page looks incredibly helpful, but how do I do it with the text & input fileds?
Maybe a <div> with the text floating right and the input field vertically aligned at 50% ?

Answer 1

Try display: table-cell;
.wrapper {
display: table;
}
.inner {
display: table-cell;
}

Answer 2

#wrapper div.td1 {
text-align: right;
padding: 0;
margin: 0;
vertical-align: middle;
/* added incase of too long label text */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#wrapper div {
width: 50%;
display: inline-block;
text-align: left;
padding-left: 5px;
margin-right: -5px;
}
#wrapper {
width: 100%;
line-height: 1.5em;
}
<div id="wrapper">
<div class="td1">name</div><div><input type="text"></div>
<div class="td1">date of birth</div><div><input type="text"></div>
<div class="td1">Shakespeare villain I would like to be</div><div><input type="text"></div>
<div class="td1">favo(u)rite do(gh)nut</div><div><input type="text"></div>
<div class="td1">pet's blood grou </div><div><input type="text"></div>
<div class="td1">mother's maiden name</div><div><input type="text"></div>
<div class="td1">favo(u)rite Led Zeppelin track</div><div><input type="text"></div>
</div>

Answer 3

The best thing you can get here is to recreate table layout with different DOM elements plus some display:table-*** declarations :
div.parent { display:table; }
div.parent > row { display:table-row; }
div.parent > row > * { display:table-cell; }
div.parent > row > label { text-align:right; padding: 0 0.25em; }
div.parent > row > label::after { content:":"; }
<div class="parent">
<row>
<label>name</label>
<p>_____________</p>
</row><row>
<label>date of birth</label>
<p>_____________</p>
</row><row>
<label>Shakespeare villain I would like to be</label>
<p>_____________</p>
</row><row>
<label>favo(u)rite do(gh)nut</label>
<p>_____________</p>
</row><row>
<label>pet's blood group</label>
<p>_____________</p>
</row><row>
<label>mother's maiden name</label>
<p>_____________</p>
</row><row>
<label>favo(u)rite Led Zeppelin track</label>
<p>_____________</p>
</row>
</div>

Answer 4

A touch of flex
This may have some limitations depending on the rest of your layout; treat it as an experiment.
To reduce the amount of HTML used along with a tiny amount of CSS, we can play around with a flexbox layout.
Compatibility: IE 11+ and all modern browsers
The <form> container is given display: flex and, to align each label in the center of its input, align-items: center. flex-wrap: wrap is used to form rows.
The inputs and labels are given flex: 1 1 50%. This gives them an initial width of 50% which will then grow and shrink with the container. The initial value of 50% can be changed to make the inputs wider or smaller, as long as the label and inputs initial values add up to 100%.
The rows are spaced out with margin: 5px 0 5px on the inputs to provide a top and bottom margin. The top and bottom margin value should remain the same so the labels are centered.
box-sizing: border-box incorporates border and padding into the elements width and height
A guide to Flexbox is very useful.
Full Example
The form can be nicely controlled with min-width and max-width to maintain some flexibility.
* {
box-sizing: border-box;
}
form {
display: flex;
flex-wrap: wrap;
align-items: center;
max-width: 600px;
min-width: 300px;
}
label {
text-align: right;
flex: 1 1 50%;
padding-right: 10px;
}
input {
flex: 1 1 50%;
margin: 5px 0 5px;
}
<form>
<label for="label1">This is a really long label</label>
<input id="label1" type="text">
<label for="label2">Smaller label</label>
<input id="label2" type="text">
<label for="label3">Tiny</label>
<input id="label3" type="text">
</form>