Any ideas on how to achieve the following layout:
<table border="0">
<tbody>
<tr>
<td style="margin-right:5px;">
<h2 id="optiona" class="option optiona optiona2">a. aa </h2>
</td>
<td style="margin-right:5px;">
<h2 id="optionb" class="option optionb optionb2">b. a </h2>
</td>
</tr>
<tr>
<td style="margin-left:5px;">
<h2 id="optionc" class="option optionc optionc2">c. aa </h2>
</td>
<td style="margin-left:5px;">
<h2 id="optiond" class="option optiond optiond2">d. </h2>
</td>
</tr>
</tbody>
</table>
Here's an example using HTML and CSS:
<h2 style="display:inline;" id="optiona" class="option optiona optiona1">a. a </h2>
<h2 style="display:inline;" id="optionb" class="option optionb optionb1">b. aaa </h2>
<br />
<h2 style="display:inline;" id="optionc" class="option optionc optionc1">c. aaa </h2>
<h2 style="display:inline;" id="optiond" class="option optiond optiond1">d. aa </h2>
I am also willing to explore solutions involving JavaScript and/or jQuery.
P.S. Keep in mind that I have no control over the content length, so it may vary. The text should wrap automatically based on its length. If one column in a table is wider than the others, the entire column should match that width. How can this be achieved with just html and css? Essentially, I need the h2 elements to line up like this:
a.aaaaa b.a
c.a d.aaa