Truncate Width of <p> to width of inner text which is rigth-aligned

Question

I am right-aligning text inside of a fixed width <p>. I would like the width of the <p> to then truncate so that it becomes the minimum width possible which respects that wrapping, Basically, the width of the actual text.

check out this fiddle: I want the heading to be horizontally aligned with the word "Example".

EDIT: To be more clear: I want the <p> to be right-aligned. I also want to horizontally align a heading with the left edge of said right-aligned <p>.

https://jsfiddle.net/1ojkp4ys/30/

I would like the solution to work with any text so not just hard coding some padding

<div>
  <h4>
    PLEASE LINE ME UP
  </h4>
  <p>
    This is some example
  </p>
</div>

p {
  width: 50px;
  text-align: right;
}

div {
  display: flex;
  flex-direction: column;
}

Notice how the "P" in "Please" in the heading is left of the "e" in "example"

Answer 1

Removed the width from p and removed the align.

Based on what you said, it sounds like you want the heading to be centered, so use h1{text-align : center ;}.

This is way better from a designer's perspective. But if you are trying to do something else, explain more.

Answer 2

Instead of having a fixed width for the paragraph, use <br/> to multi-line it. The width of the paragraph will then be precise to the edges of its text and horizontal alignment with another element will be easy.