Overflowing the text of a bootstrap progress bar

Question

Here is my HTML:

<div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped first-bar" style="width:10%;">I want this text to overflow into the div to the right</div>
    <div class="progress-bar progress-bar-success second-bar" style="width:90%;">I want this text to overflow into the div to the left</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped first-bar" style="width:90%;">I want this text to overflow into the div to the right</div>
    <div class="progress-bar progress-bar-success second-bar" style="width:10%;">I want this text to overflow into the div to the left</div>
</div>

This is my CSS:

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.first-bar {
    white-space: nowrap;
    position: relative;
    text-align: left;
}
.second-bar {
    white-space: nowrap;
    text-align: right;
    direction: rtl;
}

I want to overflow the text of all the div elements in each progress-classed div. You can see in my Fiddle here what I am trying to do and that my CSS works for overflowing the text of the left div into the right div, but not the other way around (text of the right div into the left div). How can I make it work the other way around? I have tried adding position: relative; on the CSS for second-bar but this does not work for me because then it breaks the first scenario.

Answer 1

Adding position: relative; to the style of the second-bar with 10% width allowed the text to stay above the first progress bar. JS Fiddle Here. I could not add this to the actual second-bar css class, because the first bar would not overflow into the second bar.