JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
      <tr>
        <th>
          <div class="header">
            <div>&#8592;</div>
            <div>aaaaaaaaa aa</div>
            <div>&#8594;</div>
          </div>
        </th>
        <th>
          <div class="header">
            <div>&#8592;</div>
            <div style="flex: 0;">bbbbbbbbb bbbbbbbb bbbbbbb</div>
            <div>&#8594;</div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>aaaaaaaaaaaaaaaaaaaaa</td>
        <td>bbbbbbb</td>
      </tr>
    </tbody>
  </table>

CSS

th,
td {
  border: 1px solid black;
  text-align: left;
}

.header {
  display: inline-flex;
}