Align the vertical position of the first div in multiple header cells

Question

I have an element that contains multiple divs, multiple divs inside the first header cell and only one div inside the second header cell. If you run the code below, "123" will appear centered (vertically aligned with "abc") -

<table style="width:100%">
  <tr>
    <th>
      <div>abc</div>
      <div>xyz</div>
    </th>
    <th>
      <div>123</div>
    </th>
  </tr>
</table>

I want to align 'abc' and '123' vertically.

Answer 1

Change the vertical alignment of cells with "123"

<table style="width:100%">
  <tr>
    <th>
      <div>abc</div>
      <div>xyz</div>
    </th>
    <th style="vertical-align: top;">
      <div>123</div>
    </th>
  </tr>
</table>