Align two DIVs in a TH

Question

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?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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

Align two DIVs in a TH

Sign up