Float span right in table using spans as columns

[wahashem]

Because of some nuances with jQuery's Sortable, I'm displaying a table element in HTML, but using 's to create the columns instead of 's (below and in this fiddle):\[code\]<style> /* Title row for an action/item */ .item-row { display: table-row; } /* Keep icon columns narrow */ .icon_column { display: table-cell; width: 20px; } /* Item columns that are not icons */ .name_column { display: table-cell; } .extra_column { display: table-cell; float: right; }</style><table class='table table-condensed'> <thead> <tr class='table_header'> <th> <div class='item-row'> <span class='icon_column'>*</span> <span class='icon_column'>*</span> <span class='icon_column'>*</span> <span class='name_column'>Name</span> <span class='extra_column'>Date</span> </div> </th> </tr> </thead> <tbody> <tr> <td> <div class='item_row'> <span class='icon_column'>*</span> <span class='icon_column'>*</span> <span class='icon_column'>*</span> <span class='name_column'>Name 1</span> <span class='extra_column'>Date 1</span> </div> </td> </tr> <tr> <td> <div class='item_row'> <span class='icon_column'>*</span> <span class='icon_column'>*</span> <span class='icon_column'>*</span> <span class='name_column'>Row 2 Name 2</span> <span class='extra_column'>Date 2</span> </div> </td> </tr> <tr> <td> <div class='item_row'> <span class='icon_column'>*</span> <span class='icon_column'>*</span> <span class='icon_column'>*</span> <span class='name_column'>Name 3</span> <span class='extra_column'>Date 3</span> </div> </td> </tr> </tbody></table>\[/code\]I want each item-row to display as one line with the extra_column floating all the way to the right. The extra_column seems to be to the right, but the entire item-row seems to be defaulting to two lines.How can I correct this CSS??