Floating an element to the top right of its container - html

Question

I have a HTML file which I cannot edit.
<section>
<h2>Section heading</h2>
<p>Paragraph text</p>
<img src="image.jpg" />
</section>
The design is asking for the photo to be in the top right of the section, which is easy if the image is the top child of section. Unfortunately the image in the supplied HTML is right at the bottom of the section in the HTML, so simply floating right won't work. With a little work I figured out how to absolute position a div while keeping it in the page flow by faking the flow with another floated element.
* {
box-sizing: border-box;
}
section {
position: relative;
outline: 1px solid #CCC;
}
div {
display: inline-block;
width: 140px;
height: 140px;
background-color: green;
border-radius: 100px;
position: absolute;
top: 0;
right: 0;
}
h2::before {
content: "";
display: inline-block;
float: right;
width: 150px;
height: 150px;
outline: 1px solid red;
}
h2 {
outline: 1px solid blue;
}
See https://jsfiddle.net/tnxhy0po/3/
Div - Using it to demonstrate an image in the fiddle.
Red outline - Right floated ::before pesudo element for
the header.
Blue outline - Header outline.
Silver outline - Section
outline.
Now for the problem.
The header contains the words "Meet the Owner, Julie" and Julie is meant to be on a separate line. If I limit the width of the header in order to do this, the floated spacer element gets contained in the width of the header, which means that text below it doesn't flow up to the image.
See https://jsfiddle.net/s7eke1gy/16/
I'm not sure how to make the image float in the top right corner of the section. Placing it there is easy but making it a part of the flow isn't.
Alternatively, the current float + absolute position solution would work if I could find some way to get "Julie" to move to the next line.
Edit: While testing I had set the section to a max width and forgot to remove it. The width of section is dynamic and as such 100%. I've removed the max-width property from the section in here and in the jsfiddles. Sorry for the confusion!

Answer 1

If I understand you correctly, you want to put Julie on a separate line and leave the text floating like on https://jsfiddle.net/tnxhy0po/1/
You can try to combine before and after pseudo elements, use :before to wrap h2
( move Julie to new line ) and :after to wrap paragraph.
h2::before {
content: "";
display: inline-block;
float: right;
width: 150px;
height: 25px;
outline: 1px solid red;
}
h2::after {
content: "";
display: inline-block;
float: right;
width: 10px;
height: 120px;
outline: 1px solid red;
}
You can see result on https://jsfiddle.net/s7eke1gy/13/
Hope I understand you and this can help.