How to wrap second child around a first child using Flexbox

Question

We\'re trying to get the following result using Flexbox, but cannot seem to get the line on the right to wrap around Mr. Bond:

Desired output:

<

Answer 1

You cannot do this using flexbox or CSS grid (it's simply impossible). You have two possibilies.

Either using float:

.flex-child-1 {
  font-weight: bold;
  float:left;
  margin-right:5px;
}

<div class="flex-parent">
  <div class="flex-child-1">Mr. Bond</div>
  <div class="flex-child-2">We would like for this text to continue on your right hand side on the same line after your name, then continue to a new line under your name and continue the pattern until all the text is done.</div>
</div>

Or inline elements like stated in the other answer.

.flex-child-1 {
  font-weight: bold;
  margin-right:5px;
}
.flex-child-1,
.flex-child-2 {
  display:inline;
}

<div class="flex-parent">
  <div class="flex-child-1">Mr. Bond</div>
  <div class="flex-child-2">We would like for this text to continue on your right hand side on the same line after your name, then continue to a new line under your name and continue the pattern until all the text is done.</div>
</div>

---

Or you hack it with your flexbox structure but it doesn't mean you can do it with flexbox

.flex-parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.flex-child-1 {
  font-weight: bold;
  width:0;
  white-space:nowrap;
}

.flex-child-2 {
  text-indent:80px;
}

<div class="flex-parent">
  <div class="flex-child-1">Mr. Bond</div>
  <div class="flex-child-2">We would like for this text to continue on your right hand side on the same line after your name, then continue to a new line under your name and continue the pattern until all the text is done.</div>
</div>

Answer 2

If not using CSS is okay, you can use this solution utilizing <b> tags. It makes use of inline elements.

<div>
  <p><b>Mr. Bond</b> We would like for this text to continue on your right hand side on the same line after your name, then continue to a new line under your name and continue the pattern until all the text is done.</p>
</div>