要素の中身にCSSのvertical-alignを指定できるようにする(擬似テーブル)

表なんだけどテーブルを使いたくない。けど、どうしてもvertical-alignを指定したい場合はこれ。
CSSで親要素に「display:table;」、子要素に「display:table-cell;」でdivが擬似的なテーブルになってくれます。

th

タイトルタイトルタイトルタイトルタイトルタイトル

th
タイトルタイトルタイトルタイトルタイトルタイトル

<style>
.div-table {
display:table;
border-bottom: 1px solid #ddd;
width:100%;
margin-bottom:20px;
}
.div-table-cell {
display:table-cell;
padding:5px;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
}
.div-table-cell:first-child {
border-left: none;
}
.div-table-cell.middle {
vertical-align:middle;
}
.div-table-cell.th {
width:15%;
background-color:#f1f1f1;
}
.div-table-cell.td {
width:35%;
background-color:#fff;
}
</style>
<div class="div-table">
<div>
<div class="div-table-cell middle th">
th
</div>
<div class="div-table-cell middle td">
<input type="text" />
</div>
<div class="div-table-cell middle th">
<p>タイトルタイトルタイトルタイトルタイトルタイトル</p>
</div>
<div class="div-table-cell middle td">
<input type="text" />
</div>
</div>
<div>
<div class="div-table-cell middle th">
th
</div>
<div class="div-table-cell middle td">
<input type="text" />
</div>
<div class="div-table-cell middle th">
タイトルタイトルタイトルタイトルタイトルタイトル
</div>
<div class="div-table-cell middle td">
<p><input type="text" /></p>
</div>
</div>
</div>