保持箭头靠近表格标题上的标题

Question

我有下表：

table {
  border-collapse: collapse;
}

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

.header {
  display: inline-flex;
}

  <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>bbbbbbbbb bbbbbbbb bbbbbbb</div>
            <div>&#8594;</div>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>aaaaaaaaaaaaaaaaaaaaa</td>
        <td>bbbbbbb</td>
      </tr>
    </tbody>
  </table>

我想要实现的是即使每个标题的右箭头始终靠近标题，即使由于窗口（和表格）调整大小而导致文本自动换行。

这是表格未调整大小的情况（没关系）：

这是调整表大小（不正常）的情况：

调整表格大小后，这就是我想要的：

在最后一种情况下，我在标题flex: 0上使用了div，但这即使在第一种情况下也将强制换行，而我不希望这样。

这里是jsfiddle

谢谢！