Wrapping some, but not all, text around an image-CodePudding

I'm trying to get a layout similar to this one below: The problem is that I can't seem to get the headline to not wrap but the paragraph to wrap. Here's what I've tried so far:

Floating. I've floated the image right, but that wraps everything. Tried floating the text left, that didn't seem to fix the issue. Tried white-space nowrap, this was very close, only I couldn't set a width at all to the headline so it just fell off the page.
Fixed paragraph width. Setting a fixed width to the paragraph doesn't work because I need it to wrap below the image. I also can't do to paragraphs, as I need this to be responsive and not have a gap between the two paragraphs as the text expands horiztonally to fill more space.
Contenteditable = true. I used a combination of an empty container set to the size of the image and to float and contenteditable = "true" on the paragraph. This by far got me to the closest outcome, although I ended up in trouble because I have a series of about 4 blocks of these on a page, each with a different amount of content. This meant that placing the float container directly over the image is nearly impossible. To keep the wrap, as well, I can't set the container to position: absolute. Also, the container has to be directly next to the paragraph to work, which makes positioning that much more challenging.

I think I either need a solution to get that container div to always be in the exact same place as the image, or a solution to wrap the paragraph but not the header. I'm open to any and all solutions at this point. Here's a sample of what the DOM looks like for each one of these sets:

<div > <!-- container for the chunk -->
        <img src="" />
        <div > <!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
            <h2>This is the headline that shouldn't wrap.</h2>
            <div ></div> <!-- this element empty and set to float -->
            <p contenteditable="true">This is the paragraph that I need to wrap.</p>
        </div>
    </div>

CodePudding user response：

You simply have to position the floated element directly before the text block, after the header (as you already did in your code example). Then a float: right; will work the way you describe it:

.box {
  width: 600px;
}

.imgblock {
  width: 300px;
  height: 300px;
  background: #ddd;
  float: right;
}

<div >
  <!-- container for the chunk -->
  <img src="" />
  <div >
    <!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
    <h2>This is the headline that shouldn't wrap.</h2>
    <div ></div>
    <!-- this element empty and set to float -->
    <p contenteditable="true">This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need
      to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph
      that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap.</p>
  </div>
</div>