Struggling with CSS to align drink names and descriptions on a bar's menu. Want the name left aligned and the description right aligned, even if wrapped lines are also right aligned.
Current progress can be seen at http://jsfiddle.net/H96XQ/
CSS:
.alignleft {
font-weight: 700;
text-transform: uppercase;
float: left;
text-align:left;
}
.alignright {
font-weight: 400;
font-style: italic;
float: right;
text-align:right;
}
HTML:
<div id="textbox">
<p class="alignleft">Old Fashioned</p>
<p class="alignright">Bulleit Bourbon, Raw Sugar, Luxardo Maraschino Cherries, Soda, Orange</p>
<div style="clear: both;"></div>
<p class="alignright">Jameson Irish Whiskey, Coffee</p>
<div style="clear: both;"></div>
</div>
The layout works for single line descriptions like Irish Coffee, but wider content doesn't wrap correctly - each part gets its own line.
A workaround is using consecutive "alignright" classes manually where wrapping should happen, which is tedious and not scalable with menu changes.
<div id="textbox">
<p class="alignleft">Old Fashioned</p>
<p class="alignright">Bulleit Bourbon, Raw Sugar,</p>
<p class="alignright"> Luxardo Maraschino Cherries, Soda, Orange</p>
<div style="clear: both;"></div>
<p class="alignleft">Irish Coffee</p>
<p class="alignright">Jameson Irish Whiskey, Coffee</p>
<div style="clear: both;"></div>
</div>
Seeking assistance to achieve desired alignment without manual workarounds. Any help is highly appreciated.