Question

I have two tables next to each other and problem is that I want both tables to display inline with each other but I want them inline with the table headings inline with each other. It does this in Internet Explorer and opera but it does not do this for Safari, Firefox and Google Chrome as in those browsers it displays the tables inline but inline by bottom of the table and not top of the table.

How can I do this?

Code is here in Jsfiddle.

Answer 1

You can use the vertical-align property to force the table to the top of the block. Change the CSS to this:

#optionAndAnswer
{
  display: inline-block;
  vertical-align: top;
}