Vertical alignment of paragraphs with paragraph titles - css

Question

Please see this Fiddle...
I have two columns. Left column holds paragraph titles. Right column holds the actual paragraphs. I'm trying to align the paragraph title, with the top line of each paragraph and I'm having the hardest time doing it without using unnecessary and sloppy line breaks.
.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; }
Thoughts?

Answer 1

This is a perfect example of when good ol' <table> elements are still useful! Also, notice that if the overall width is not big enough, your paragraphs wrap under all the titles completely.

Answer 2

The proper way to do this is to use a definition list
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
<dl>
<dt>Firefox</dt>
<dt>Mozilla Firefox</dt>
<dt>Fx</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.</dd>
<!-- other terms and definitions -->
</dl>

Answer 3

If you did want to do this in div elements and not dt, have a look at this fiddle
HTML
<div class='wrapper'>
<div class="col1">
Paragraph 1
</div>
<div class="col2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros est, pellentesque in leo at, molestie mattis sem. Phasellus at est in ligula malesuada ullamcorper nec et massa.
</div>
<div style='clear:both;'></div>
<div class="col1">
Paragraph 2
</div>
<div class="col2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros est, pellentesque in leo at, molestie mattis sem. Phasellus at est in ligula malesuada ullamcorper nec et massa.
</div>
<div style='clear:both;'></div>
<div class="col1">
Paragraph 3
</div>
<div class="col2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eros est, pellentesque in leo at, molestie mattis sem. Phasellus at est in ligula malesuada ullamcorper nec et massa.
</div>
<div style='clear:both;'></div>
</div>
CSS
body{
width:100%;
}
.wrapper{
border: 1px solid black;
}
.col1, .col2 {
float: left; width: 300px; padding: 10px;
}
.col2{
border-left:1px solid black;
}