
I need to align this text right to left but not from the farthest point on the page and am unsure of how to do so using the end of the first line as the reference point to start the text align right.

I need to align this text right to left but not from the farthest point on the page and am unsure of how to do so using the end of the first line as the reference point to start the text align right.
.wrapper {
display: inline-block;
text-align: right;
}
<div class="wrapper">
<div>longest line of text</div>
<div>line of text</div>
<div>line of text</div>
</div>
Can't test at the moment but that should be what you're looking for. Inline block wrapper "shrinks" to size of content which is the widest block, the child block elements will naturally expand to be the width of the parent.