如何使 Flexbox 项目与其他项目具有相同宽度，但在新行上

Question

我想将 Flexbox 项目设置为与两个 Flexbox 项目组合的宽度相同的宽度。例如：

.body {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}

.line-break {
  flex-basis: 100%;
}

.item-1 {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.item-2 {
  width: auto;
  height: auto;
  border: 1px solid black;
}

.item-3 {
  border: 1px solid black;
}

<div class="body">
  <div class="item-1">
  </div>
  <div class="item-2">
    <p>This is a text</P>
  </div>
  <div class="line-break" />
  <div class="item-3">
    <p>This is another text</p>
  </div>
</div>

旁注：我在我的项目中使用 React 框架。

我如何计算

item-3

的宽度，使其动态与

item-1

+ 间隙 +

item_2

具有相同的宽度？

https://codepen.io/InFusion-the-sans/pen/wvQRRxK

我尝试将

flex-basis

上的

item-3

属性设置为某个百分比，但结果与我想要的预期宽度相差太远。