css - 如何使元素之间的差距相等

Question

我需要元素 1、元素 2(顶部元素)和副元素大小相同且它们之间的间距相同。底部元素需要在顶部元素之下，并且与顶部元素的总和一样宽。

https://codepen.io/ermek-barmashew/pen/PowZoKO?editors=1100

.content {
  width:100%;
  display:flex;
  justify-content: space-between;
}

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: calc(100% * 2/3);
    background-color: gray;

}


.top-item {
    width: calc(50% - 20px);
    margin-bottom: 40px;
  background-color: green;
}

.bottom-item {
  width: 100%;
  background-color: yellow
}

.side-item {
    background-color: #7c7d98;
    width: calc(100%/3 - 20px);    
}

<div class = 'content'>
  <div class = 'container'>
      <div class="top-item">
        Top item 1
      </div>

      <div class="top-item">
        Top item 2
      </div>

      <div class="bottom-item">   
        Bottom item
      </div>
  </div>

  <div class="side-item">
  Side item
  </div>
</div>

Answer 1

结果

---

HTML

<div class="container">      
  <div class="right-items">
    <div class="top-item1">
      Top Item 1
    </div>

    <div class="top-item2">
      Top Item 2
    </div>

    <div class="bottom-item">
      Bottom Item
    </div>
  </div>

  <div class="space">
  </div>

  <div class="side-item">
    Side Item
  </div>
</div>

---

CSS

/* Root */
.container {
  display: flex;
}


/* Right Side */
.right-items {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}

 /* Space in the center */
.space {
  width: 2%;
}

/* Left Side */
.side-item {
  width: 50%;
}


/* Right Items */
.top-item1 {
  width: 50%;
}

.top-item2 {
  width: 50%;
}

/* Left Item */
.bottom-item {
  width: 100%;
}

---

演示

https://codepen.io/wilsonbalderrama/pen/VwYaLrR