Quasi 2 columns: negative margin, float, clear?

[2]      [1]
[4]      [3]
[5]

I need some help getting my head around this. Each of the brackets represents a paragraph, and the number their order in the source code. I want to make a quasi 2 column layout from the paragraphs without actually having two full columns, so I can be flexible with the order. The left ones have a % width, and so do the right ones, and for now I am achieving this by floating the ones on the right to the right. The thing is I want the tops of the paragraphs that are side by side to line up. However, I realized that if [1] is taller than [2], then [3] not go under [1], because [4]'s position has nothing to do with [1] (it won’t be pushed down automatically).

Is there a smarter way of doing this layout that doesn’t require additional styling on the containing element (except for maybe position), or wrapping a DIV around 2 paragraphs that I want to be next to eachother and doing clear:right?

Am assuming that as long as the TOPS between pairs align you are content ( keep in mind some white space at the bottom will need to happen for this to occur anyway) and that you container hold only Ps ( or at least the last element is a P) you could just do this:


			p{float:right; width:50%; outline: 1px solid pink; }
			p:nth-child(2n+1){clear:right }
			p:last-child{float:left;}


<div>
    <p>1<br>Lorem ipsum dolor <br>Lorem ipsum dolor sit amet, </p>
    <p >2<br>Lorem ipsum dolor</p>
    <p>3.</p>
    <p>4</p>
    <p>5<br>Lorem ipsum dolor sit arum</p>
</div>


Floating the items right would put them in the order you want (2,1,4,3…) almost, as the last P will then go on the right, thus we target the last:child float it left. This works consistently even if you were to have an even # of Ps.

Hope that helps.