How to fix the width of inline element content for text wrapping?

The h1 element, its parent block has the properties:
{
 flex display; 
 flex-direction: column;
}

and the item has a property:
{
 align-self: flex-end;
}

what is required to position this element at the right edge of the screen.
All it works:
5afd5819980e9340263490.png
while not wrapping text:
5afd5ace4a60d863517596.jpeg
this shift makes the width of 100% and thus forces him to pull over to the left edge of the screen, and I need here's the layout:
5afd5982b99de109726978.png

Tell me how is it possible to do this? The properties to use to get rid of the indent appear to the right of the text?
June 5th 19 at 21:19
3 answers
June 5th 19 at 21:21
Solution
Found another option:
add a br tag.hero__line-break property "display: none";
and with the required screen sizes:
add a media query that change the visibility .hero__line-break "display: block";
Option a spike, but it is working, with him there is no need to choose the width of the block, it clearly is trimmed with br
https://codepen.io/missing00/pen/OZabbm
June 5th 19 at 21:23
h1.hero__title-bottom stretches the entire width.
You can either align the text to the right
h1.hero__title-bottom {
text-align:right;
}

Or set the width. for example:
h1.hero__title-bottom {
width:400px
}
thanks for the reply, the text-align is not suitable because the I position not the text and the unit text.
have the width to fit different resolutions, it's a shame, was hoping for a more flexible solution. - evans.Goodwin commented on June 5th 19 at 21:26
June 5th 19 at 21:25
Vtupuyu - it is unclear how. But you can ask
.hero__title-bottom{
margin-left: ....
}

Valid only when not enough width
thanks for the reply, the margin will be constantly move the unit when resize, stopped at a fixed width. - evans.Goodwin commented on June 5th 19 at 21:28

Find more questions by tags CSSHTML