Как обернуть второго ребенка вокруг первого ребенка с помощью Flexbox

Question

Мы пытаемся получить следующий результат с помощью Flexbox, но, похоже, не можем получить строку справа, чтобы обернуть вокруг Мистер. Облигация :

Желаемый выход:

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

.flex-child-1 {
  font-weight: bold;
}

.flex-child-2 {}

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

Есть идеи, как добиться sh желаемого результата с помощью макета Flexbox?

Вот скрипка

Answer 1

Вы не можете сделать это с помощью flexbox или CSS grid (это просто невозможно). У вас есть две возможности.

Либо с помощью 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>

Или встроенные элементы, как указано в другом ответе.

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

---

Или вы взломаете это с вашей структурой flexbox, но это не значит, что вы можете сделать это с 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

Если вы не используете CSS, это нормально, вы можете использовать это решение, используя теги <b>. Он использует встроенных элементов .

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