Übergang von rechts nach links

Ich habe eine Website, auf der ich Text von der rechten Seite des Bildschirms nach links verschieben muss. Der Text ändert sich ständig in der Länge, so dass ich nicht einfach eine Breite hart codieren kann, um das zu erreichen, was ich will.

Ich habe versucht, einen Übergang durchzuführen, aber wenn ich von rechts nach links gehe, funktioniert er nicht mehr. Ich habe eine einfache jsfiddle geschrieben, um mein Problem zu demonstrieren und wie ich versucht habe, es zu lösen. Das erste div zeigt, wie es funktionieren sollte, aber ich brauche den Text, um nach links statt nach rechts auszurichten (die Eigenschaft text-align funktioniert nicht mit meinem vollständigen Code). Der zweite Teil zeigt Ihnen das tatsächliche Ergebnis dessen, was passiert, wenn ich nach links übergehe.

https://jsfiddle.net/h12wrm1n/

$("#right").on("click", function () {
    $("#right").toggleClass("active");
});
$("#right2").on("click", function () {
    $("#right2").toggleClass("active");
});
.right, .right2{
  width: 300px;
  position: absolute;
  right: 20px;
  transition: .5s
}
.right2{
  top: 100px;
}
.right.active{
  right: 200px;
}
.right2.active{
  left: 20px
}
<div id="right" class="right">This is some text</div>
<div id="right2" class="right2">This is some text</div>

Wie kann ich den Übergang von rechts nach links durchführen lassen, wenn ich die Breite meines Textes nicht kenne? Bitte beachten Sie auch, dass die Seite reagiert.