How to make a Flexbox item the same width as other items but on a new line

Question

I want to set a Flexbox item the same width as the width of two Flexbox items combined. For example:

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

A side note: I'm using the React framework for my project.

How would I calculate the width for item-3 so it would have the same width as item-1 + gap + item_2 dynamically?

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

I've tried to set the flex-basis property on item-3 to some percentage but the result is too far off the expected width I wanted.

Answer 1

You can add an extra wrapper like so:

.body {
  display: inline-flex;
  flex-direction: column;
  gap: 2rem; /*this is the line break,   <div class="line-break" /> does nothing, since it doesn't have height*/
}

.top-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}
.item-1 {
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

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

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

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