Eric Belair Eric Belair - 5 months ago 18
HTML Question

Align two DIVs in a TH

I have a

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

The issue I am having is that when the columns are reduced in size due to resolution/browser window size, the text in the
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 class="sort-icons">
        <a href="?sortBy=OrderNumber&sortOrder=ASC" title="Sort Ascending"><span class="ui-icon ui-icon-circle-triangle-n"></span></a>
        <a href="?sortBy=OrderNumber&sortOrder=DESC" title="Sort Descending"><span class="ui-icon ui-icon-circle-triangle-s" style="display: block;"></span></a>


.flex-container {
  display: flex;

Updated Fiddle