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

  
Mr. Bond
  
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.

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

  
Mr. Bond
  
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.

---

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

  
Mr. Bond
  
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.