Keep arrow close to caption on table header

Question

I have the following table:

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>

What I want to achieve is to keep the right arrow of each header always close to the caption, even if the text wraps because of window (and table) resize.

This is the situation when table is not resized (and it's ok):

This is the situation when table is resized (not ok):

This is what I want when table is resized:

For the last case I used flex: 0 on the caption div, but this will force text wrap even in the first case, and I don't want it.

Here is the jsfiddle

Thanks in advance!