How can I make text wrap around to the same line in a div?

Question

I'm wondering if there's a way in CSS to get text to wrap around a div on the same line.

For example, say I have this text inside a div:

...and I position the text more to the right (say it has an absolute position and I set left: 50%), I would like to see this:

Note that it doesn't wrap to the next line, but it remains on the SAME line.

Is this possible?

Answer 1

Here you go, you can get an idea from this example

NOTE: Properties like margin-left and right of .child and :last-child are to be changed according to the width of the parent div

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

.container, .container2, .container3 {
  position: relative;
  display: flex;
  width: 10rem;
  height: 20px;
  background: white;
  border: 4px solid red;
}
.container2 {
  margin-top: 2rem;
  overflow-x: hidden;
}
.container3 {
  width: 20rem;
  height: 20px;
  font-weight: 900;
  font-family: 'Inter';
  margin-top: 2rem;
  border: 1px solid gray;
  overflow-x: hidden;
}

.child {
  position: absolute;
  display: flex;
  width: 100%;
  height: 20px;
  margin-left: -50px; /* This has to be changed according to the width of the parent div, i.e. in this case `container` */
}

.charmander {
  position: absolute;
  width: 50%;
}

.charmander:first-child {
  left: 0;
}

.charmander:last-child {
  right: -84px; /* This has to be changed according to the width of the parent div, i.e. in this case `container` */
}

.container3 .charmander:last-child {
  right: -160px; /* This has to be changed according to the width of the parent div, i.e. in this case `container` */
}

<div class="container">
  <div class="child">
    <div class="charmander">
      CHARMANDER
    </div>
    <div class="charmander">
      CHARMANDER
    </div>
  </div>
</div>

<div class="container2">
  <div class="child">
    <div class="charmander">
      CHARMANDER
    </div>
    <div class="charmander">
      CHARMANDER
    </div>
  </div>
</div>


<div class="container3">
  <div class="child">
    <div class="charmander">
      This is some text.
    </div>
    <div class="charmander">
      This is some text.
    </div>
  </div>
</div>