Eric Belair Eric Belair - 5 months ago 18
HTML Question

Align two DIVs in a TH

I have a

table
in which I want to add sort icons to the right of the text in the
th
. Here is my current code:

https://jsfiddle.net/4zhg76nr/

The issue I am having is that when the columns are reduced in size due to resolution/browser window size, the text in the
th
gets moved above the icons. How can i use CSS to always have the text to the left of the icons?

Answer Source

Wrap text and icon into flex-container and use flexbox

<div class="flex-container">
  <div class="label">
    Order Number
  </div>
  <div class="sort-icons">
    <cfoutput>
      <div>
        <a href="?sortBy=OrderNumber&sortOrder=ASC" title="Sort Ascending"><span class="ui-icon ui-icon-circle-triangle-n"></span></a>
      </div>
      <div>
        <a href="?sortBy=OrderNumber&sortOrder=DESC" title="Sort Descending"><span class="ui-icon ui-icon-circle-triangle-s" style="display: block;"></span></a>
      </div>
    </cfoutput>
  </div>
</div>

CSS

.flex-container {
  display: flex;
}

Updated Fiddle