CSS Text Columns

I'm currently learning HTML/CSS and have come across a challenge around text columns. I'm trying to recreate www.campaignmonitor.com as a practice exercise.

Here's the challenge:

I have a text area using a two column layout, featuring 4 paragraphs of text. I'd like to keep the top two paragraphs aligned on the top edge, and the lower two paragraphs also aligned on their top edges. In other words, if either of the top paragraphs increase in height, the lower two paragraphs will both move down together.

I appreciate this may be a basic question for you CSS pro's, but I'm stumpted with this one and online resources, tutorials and other sites have given me no success.

All help is appreciated!

Tom

Here's the code I'm using:

<div class="content">
    <div class="row1">
    <div class="col1a">
        <h4>Create & send beautiful emails</h4>
        <p>Design great looking emails using your own tools, or create templates and let your clients send their own.</p>
    </div><!-- /end #col1a -->
    <div class="col2a">
        <h4>Manage lists & subscribers</h4>
        <p>We handle signups, unsubscribes and bounces automatically. Easily create targeted segments of subscribers.</p>
    </div><!-- /end #col2a -->
    </div><!-- /end #row1 -->
    <div class="row2">
    <div class="col1b">
        <h4>Powerful Analytics</h4>
        <p>Actionable reports that go beyond opens and clicks. Track you开发者_Python百科r email related conversions and sales.</p>
    </div><!-- /end #col1b -->
    <div class="col2b">
        <h4>Mark-up, Resell and Profit</h4>
        <p>White-label and rebrandable, you set the price your clients pay and we’ll send through your profit each month.</p>
    </div><!-- /end #col2b -->
    </div><!-- /end #row2 -->
</div>

And the CSS:

.content {
    width: 1024px;
    margin: auto;
    position: relative;
    margin-top: 20px;
    color: #333;
    background-color: #666;
}

.col1a {
    width: 225px;
    margin-right: 20px;
    display: block;
    float: left;
}

.col2a {
    width: 225px;
    margin-right: 20px;
    display: block;
    float: left;
}

.col1b {
    width: 225px;
    margin-right: 20px;
    display: block;
    float: left;
}

.col2b {
    width: 225px;
    margin-right: 20px;
    display: block;
    float: left;
}

.row1 {
    position: relative;
    width: 490px;
    background-color: orange;
}

.row2 {
    position: relative;
    width: 490px;
    background-color: green;
}

.content h4 {
    margin-top: 25px;
    margin-bottom: 7px;
    line-height: 22px;
    font-weight: normal;
    font-style: normal;
    font-size: 17px;
}

.content p {
    font-size: 13px;
    line-height: 18px;
}

Add clear: both to the row elements.

Your element naming is quite redundant, col1a, col1b, col2a and col2b do the same thing so they can all be named simply as col. Same goes with row elements, which are borderline useless as well.

http://jsfiddle.net/yTJTp/1/