Transitioning from right to left

I have a website where I need to move some text from right side of the screen to the left. The text is ever changing in length so I can't just hard code a width to achieve what I want.

I have tried doing transitioning but when I go right to left it stops working. I have written a simple jsfiddle to demonstrate my problem and how I tried to solve it. The first div shows how it should work, however I need the text to align to left instead of right (text-align property will not work with my full code). The second div shows you the actual result of what happens when I do transition to left.

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>

How can I have it transition from right to left if I don't know the width of my text? Also please keep in mind that the page is responsive.