Float right on 2 spans of same line, but need first span to be on left side

Question

This is my HTML code

<span class="pull-right red">Text 1</span>
<span class="pull-right green">Text 2</span>

And My CSS is

.pull-right{
    float:right;
}
.red{
    color:red;
}
.green{
    color:green;
}

It is aligning text 1 to right most on the line. I want the first span (that is text 1) to align left of second span.

Here is JSFiddle Link.

In the Case 1. I have provided my HTML.

In case 2 I have reordered the HTML. That is span text2 I have put first and text1 I have put second. Then I am getting the expected result. I can reorder it by JQuery. But I don't want to reorder the HTML.

So is there any way I can get the expecting result without reordering the HTML? Any CSS solution?

Answer 1

Use your pull-right class on a wrapping div like this:

<div class="pull-right">
  <span class="red">Text 1</span>
  <span class="green">Text 2</span>
</div>

With the same css:

.pull-right{
    float:right;
}
.red{
    color:red;
}
.green{
    color:green;
}

Working fiddle