Having trouble keeping my CSS arrow on the same line as my header

Question

I noticed this on both Chrome and Firefox. I have a CSS arrow that I put in my table's header column. However, at small screen widths the arrow goes to the next line despite the display:inline-block

How do I keep the arrow on the same line, even at small screen widths?

Fiddle

 .arrow-up:after { content: ""; display: inline-block; vertical-align: middle; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f00; } 

 <table> <tr class="headerRow"> <th class="headerRow arrow-up"> Header </th> </tr> </table> 

Answer 1

Try adding white-space: nowrap; to the .headerRow class.