Get text to wrap around other text when inside a div in CSS?

May 24, 2023

I have a situation where I need to put a superscript number (for disclaimer) before some rich text disclaimer text. The rich text is deeply inside some divs with their own styling. How can I get it to wrap around the superscript like this?

1 sometext sometext sometext sometext ...
sometext sometext ...

Instead what I am able to do is one of these:

1 sometext sometext ...
  ... sometext sometext

1
sometext sometext ...
... sometext sometext

.container {
  box-sizing: border-box;
}

sup {
  background: yellow;
  display: inline-block;
  padding: 6;
  float: left;
  margin-right: 20px;
  box-sizing: border-box;
}

.RichText {
  background: green;
  box-sizing: border-box;
}

<div class="container">
  <sup>1</sup>
  <div class="RichText">
    <div class="RichTextStyled">
      <div contenteditable="false" translate="no" class="ProseMirror">
        <p>I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines.
        </p>
      </div>
    </div>
  </div>
</div>

>Solution :

Since I’m assuming you can’t change the HTML, you can always float the SUP left and give it a margin right to space it out.

sup {
  background: yellow;
  display: inline-block;
  padding: 6;
  float:left;
  margin-right:10px;
}

.RichText {
  background: green;
}

<div class="container">
  <sup>1</sup>
  <div class="RichText">
    <div class="ProseMirror">
      <p>I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines. I am some rich text that stretches over multiple lines.</p>
    </div>
  </div>
</div>