How to have side-by-side text elements

The following does some very simple css to make the following two paragraphs look like they're side-by-side and differently aligned.

The question arose in #html and used the footer of this site as inspiration: Apache FOP.

Note: last lines of the css are just the simple htmlless containing floats advocated elsewhere.

Also note: if IE didn't suck, we could simply use the following selector, RATHER than the class "first": .left-right p:first-child {}.

.left-right {
	border-top: 2px solid #4c4c4c;
	background-color: #CFDCED;
	color: #000;
	padding: .25em .5em;
}
.left-right p { 
	text-align: right;
	
	/* collision stuff */
	min-width: 5em; 
	overflow: hidden;
	
	/* standard clean up stuff */
	margin: 0; padding: 0; 
}
.left-right p.first {
	float: left; width: 50%; text-align: left;
}




/* make sure that we contain our floats */
* html .left-right { height: 1em; }
.left-right:after { 
	content: "."; visibility: hidden; height: 0; 
	clear: both; display: block; 
}

<!-- HTML CODE -->
<div class="left-right">
	<p class="first">This text is on the left and left aligned! Yay!</p>
	<p>This is right and right-aligned.<p>
</div>