Floating element in the upper right corner of the container

Question

I have an HTML file that I cannot edit.

<section>
  <h2>Section heading</h2>
  <p>Paragraph text</p>
  <img src="image.jpg" />
</section>

The design requests that the photo be in the upper right corner of the section, which is easy if the image is the top child of the section. Unfortunately, the image in the supplied HTML is right at the bottom of the section in the HTML, so just floating right will not work. With a little work, I figured out how the absolute position of the div is, keeping it in the page stream, fooling the stream with another floating 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 - Use this to display an image in a violin.
• Red outline - Right floating :: up to the pesudo element for the title.
• Blue outline - Header outline.
• Silver outline - section outline.

. " , ", . , , - , , .

. https://jsfiddle.net/s7eke1gy/16/

, . , .

, float + absolute position , "Julie" .

: . 100%. max-width jsfiddles. !

Answer 1

, , https://jsfiddle.net/tnxhy0po/1/

, : before to wrap h2 ( ) : , .

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;
}

https://jsfiddle.net/s7eke1gy/13/ , , .