Problems trying to lay out some XAML

Problems trying to lay out some XAML

Look at the following XAML:-
<Border Width="200">
<StackPanel Orientation="Horizontal">
<TextBlock Text="The quick brown fox jumped"/>
<TextBlock Text="X"/>
</StackPanel>
</Border>
Currently, as I increase the amount of text in the first textblock, it
pushes the second textblock ("X") along, until eventually it gets pushed
off the r.h. side of the parent border and disappears from view.
How can I rewrite the XAML so that the "X" still gets pushed along by the
first textblock (as its size increases), but only as far as the r.h. edge
of the parent. Once this happens I would like the first textblock to be
the one that gets truncated instead.
Note that the parent's width will be unknown at runtime (I've only set it
to 200 to demonstrate the question).