css - 段落タイトルを含む段落の垂直方向の配置

Question

このフィドルを見てください...

私は2つの列を持っています。左の列には段落のタイトルが表示されます。右の列は実際の段落を保持します。段落のタイトルを各段落の一番上の行に揃えようとしていますが、不要でずさんな改行を使用せずにそれを行うのに最も苦労しています。

.col1 {float: left; width: 300px; border: 1px solid black; padding: 10px;}
.col2 {float: left; width: 300px; border: 1px solid black; padding: 10px;}


.line1 { height: auto; margin: 10px 0 20px 0; }
.line2 { height: auto; margin: 10px 0 20px 0; }
.line3 { height: auto; margin: 10px 0 20px 0; }

考え？

Answer 1

これは、古き良き<table>要素がまだ有用であることの完璧な例です! また、全体の幅が十分に大きくない場合、段落がすべてのタイトルの下に完全に折り返されることに注意してください。