text-overflow ellipsis on one of two spans inside a wrapper

I am having a problem with ellipsis. Here is my HTML:

<div id="wrapper">
    <span id="firstText">This text should be effected by ellipsis</span>
    <span id="lastText">this text should not change size</span>
</div>

Is there a way to do this with pure css? Here is what I have tried:

#firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#lastText
{
    white-space:nowrap;
    overflow:visible;	
}

This is how it is shown:

This text should be effected by ellipsis this text shoul

While this is the result I want:

This text should be e...this text should not change size

You can give width to your #firstText like this :

#firstText
{
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:150px;
    display:inline-block;
}

Check this example

http://jsfiddle.net/Qhdaz/5/

You could achieve this by changing the order of your spans and give the first span a float right. That way you don't have to set a width to any of your elements:

#firstText
{ 
  font-size: 30px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#lastText
{ 
  color:red;
  font-size:30px;
  float:right;
  white-space:nowrap;
}

There's still a little case not handled:

When you have an unknown or a dynamic wrapper size and you want the first child to take all available space but ellipsis if it's still too long.

Here is my solution using flex CSS properties :

#wrapper{
    display: inline-flex;
    flex-flow:row nowrap;
    max-width:100%; /* or width:100% if you want the spans to take all available space */
}
#firstText{
    flex:1;
    white-space:pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
#lastText{
    white-space:nowrap;
}

You could fake it like this: change your span to div and change your CSS:

#firstText
{
    float: left;
    width: 250px;
    height: 20px;
    overflow: hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

#lastText
{
    float: left;
    white-space:nowrap;
    overflow:visible;   
}