Truncate Width of to width of inner text which is rigth-aligned-CodePudding

I am right-aligning text inside of a fixed width . I would like the width of the  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  to be right-aligned. I also want to horizontally align a heading with the left edge of said right-aligned .

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"

CodePudding user response：

Instead of having a fixed width for the paragraph, use   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.

CodePudding user response：

remove the width from p and remove align ...

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

From a designer's perspective, that will look nice. But if you are trying to do something else, explain more.