How to fix slider text to the right?

On this page www.ajp.cool I have a slider with 6 images. Each image has a label (text) over it.

It is a Woo Flexslider. Flexslider is an ul and each slide is a li within it. Like this:

<!--and excerpt from the slider, showing only the code for the first two slides -->

<li>
    <a href="#"
        <img src="http://lorempixel.com/800/500/" alt="Illustration">
        <span class="image-text">Illustration</span>
    </a>
</li>
<li>
    <a href="#"
        <img src="http://lorempixel.com/800/500/" alt="Pictorail Maps">
        <span class="text">Pictorial Maps</span>
    </a>
</li>

And here is the CSS:

.text {
    position: relative;
    left: 5%;
    bottom: 75px;
    padding: 10px;
    color: white;
}

As you can see the left side of the label is fixed, while the right side spreads according to the text length. For example, when on Illustration the label has a certain length, but when the slider switches to Pictorial maps, the label's length is increased. Its because the text Pictorial Maps is longer than Illustration.

But I would like to have it the other way around. I would like the right side of the label to be fixed and the left one spreading according to the text length.

Is that possible with CSS?

P.S. I have created a JS Fiidle http://jsfiddle.net/M4j4/azzhwf4p/ to help me figure this out. Please use it if you need it.