title: Resize div when word wraps
body: <p>I have a table with fixed-width columns. If a column is sorted, I want to display an arrow icon to the left of its title. However, when the text in the title wraps, the div is not resized properly and the arrow gets pressed to the far left.</p>
  
  <p>The following demo shows two columns. The left one has a short title and is correct. The right one has a long title and is not as desired: <a href="https://jsfiddle.net/79pfyxo6/" rel="nofollow">https://jsfiddle.net/79pfyxo6/</a></p>
  
  <p>This is the CSS i use for the table titles:</p>
  
  <pre><code>.sortedColumn {
      float: right;
      display: table;
      table-layout: fixed; 
  }
  
  .titleElement {
      display: table-cell;
      vertical-align: middle;
  }
  </code></pre>
  
  <p>How can I change it so that the arrow of the second column is tight to the wrapped text like in this image: <a href="http://pasteboard.co/2xqPi8Nx.png" rel="nofollow">http://pasteboard.co/2xqPi8Nx.png</a></p>