improve input form with horizontal labels and vertical labels - html

Question

could you have a look at the HTML/CSS-code and result behind this link?
the CSS part:
div2 {display: table-cell; vertical-align: middle; border: 0px solid red; }
input {margin: 5px; }
label1 {margin-left: 140px; }
label2 {margin-left: 100px; }
label3 {margin-left: 90px; }
label {margin-left: 10px; margin-right: 20px; }
the HTML part:
<div1>
<label1>First name</label1>
<label2>Last name</label2>
<label3>Date of birth</label3>
</div1>
<div2>
<label for='name'>Person 1:</label>
<input type='text' id='name' />
<input type='text' id='name' />
<input type='text' id='name' />
<br>
<label for='name'>Person 2:</label>
<input type='text' id='name' />
<input type='text' id='name' />
<input type='text' id='name' />
<br>
<label for='name'>Person 3:</label>
<input type='text' id='name' />
<input type='text' id='name' />
<input type='text' id='name' />
<br>
<label for='name'>Person 4:</label>
<input type='text' id='name' />
<input type='text' id='name' />
<input type='text' id='name' />
<br>
<label for='name'>Person 5:</label>
<input type='text' id='name' />
<input type='text' id='name' />
<input type='text' id='name' />
</div2>
Is there a way to automatically align the labels on top so they exactly match with the colomns below? Looking forward to your suggestions. Regards, Piotr

Answer 1

use display: table or table
* {
padding;
0;
margin: 0;
}
.wrapper {
display: table;
table-layout: fixed;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
vertical-align: middle;
border: 0px solid red;
padding: 5px 10px;
vertical-align: middle;
}
.row:nth-child(1) {
text-align: center;
}
.row:nth-child(1) .cell {
padding-bottom: 0;
}
.row:nth-child(1) .cell label {
margin-bottom: 0;
}
input, label {
display: block;
width:100%;
margin: 5px 0;
}
label {
margin-left: 5px;
margin-right: 15px;
}
<div class="wrapper">
<div class="row">
<div class="cell"></div>
<div class="cell">
<label>First name</label>
</div>
<div class="cell">
<label>Last name</label>
</div>
<div class="cell">
<label>Date of birth</label>
</div>
</div>
<div class="row">
<div class="cell">
<label for='name'>Person 1:</label>
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
</div>
<div class="row">
<div class="cell">
<label for='name'>Person 2:</label>
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
</div>
<div class="row">
<div class="cell">
<label for='name'>Person 3:</label>
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
</div>
<div class="row">
<div class="cell">
<label for='name'>Person 4:</label>
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
</div>
<div class="row">
<div class="cell">
<label for='name'>Person 5:</label>
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
<div class="cell">
<input type='text' id='name' />
</div>
</div>
</div>