Overflow: hidden text is hidden behind the DOM element

I assume my question is trivial, but I cannot find the perfect solution. I am trying to use overflows: a hidden style to hide text behind a glyphicon (wrapped in a gap), however I cannot get my code to display as I would like.

HTML

<ul class='list-group'> 
 <li class='list-group-item'>
  <span class='fileName'>
   This_is_my_really_long_file_name_it_just_keeps_going.txt   
  </span>
  <span style = 'float:right'>    
   <a href="#"> 
    <span class='glyphicon glyphicon-remove'></span>
   </a>
  </span>
 </li>    
</ul>

CSS

.list-group-item{
position:relative; 
overflow:hidden; 
text-overflow: ellipsis; 
white-space: nowrap;    
}

I would like the glyphicon to be on the same line as the file_name, and when the screen size is small (mobile device), I would like the overflow to occur at the edge of the glyphicon, and not at the edge of the -group-element list.

In this script: http://jsfiddle.net/mkabatek/7H4Cv/11/ the glyphicon moves below the file name, so the file_name and delete glyphicon are not on the same line

: http://jsfiddle.net/mkabatek/7H4Cv/10/ .

fileName ?

DOM, : relative, position: absolute fileName, , , , .

, , !