<html>
<body>
The two blue boxes should be aligned.<br>
The two red boxes should be aligned.<br>
The text in the blue boxes should be on the same line.<br>
The text in the red boxes should be on the same line.<br>
The top of the first red box should line up with the bottom of the second last line of the last blue box.<br>
<p style="margin:0;display:inline-block;border:2px solid blue;">All on the<br>All on the<br>All on the<br>All on the</p>
<p style="margin: 0; border: 2px solid blue; display:inline-block">
<span style="display:block">same line.<br>same line.<br>same line.<br>same line.</span></p>
<table style="margin: 0; display: inline-table; border:2px solid red" cellpadding=0 cellspacing=0>
<tr><td>All on the
<tr><td>All on the
<tr><td>All on the
<tr><td>All on the
</table>
<table style="margin: 0; display: inline-table; border:2px solid red" cellpadding=0 cellspacing=0>
<tr><td>same line.&nbsp;
<tr><td>same line.&nbsp;
<tr><td>same line.&nbsp;
<tr><td>same line.
</table>
</body>
</html>
