How to make labels side-by-side aligned with each other


I have encountered a problem when I am using html to develop a website. Basically, I have two div tags align side by side. However, when the content of the first div tag is too long, the content may take more than one line to be displayed. Since the content in the second div is quite short, it only need one line to be displayed.

<div style="float:left;width:80%;">XXX ... XXX</div>
<div align="right" style="float:right;width:20%;">YYY</div>

In this case, the end of the content does not align with each other. When I add one more (the third) div tag, the content will go after the first tag rather than start a new line. I have attached two images to show the problem and what I want from the solution.

Use style="clear:both" on the third div.

<div style="float:left; width: 80%">text 1<br>text 1</div>
<div style="float:right; width: 20%">text 2</div>
<div style="clear:both">text 3</div>