Html 具有多个元素的CSS浮动2列布局

我想用四个div创建一个简单的两列布局。我受到限制，无法修改HTML结构。我只能修改CSS

我希望右列中的第二个div正好位于前一个右列div的下方。现在，它将推到第二个左div的顶部

现在这是我在HTML中的内容：

<div id="parent">
    <div class="left">
        Left 1
    </div>
    <div class="right">
        Right 1
    </div>
    <div class="left">
        Left 2
    </div>
    <div class="right">
        Right 2
    </div>
</div>

查看我的小提琴：

使用a，并在需要时允许元素移动到下一行

母公司{ 显示器：flex； 柔性包装：包装； } .左{ 高度：400px； 宽度：60%； 背景色：红色； 显示：块； } .对{ 宽度：30%； 背景颜色：绿色； 显示：块； } 左1 对1 左2 对2

---

我仔细看了看，实际上可以修改父级的CSS，但不幸的是，我不能为每一列创建单独的div。我会修改我的问题来反映这一点。所以我只能用一个单亲来封装这一切，而且只能修改CSS，而不能修改HTMLThis看起来更接近，但我实际上希望第一个右div在内容的末尾结束，第二个右div在内容的正下方开始。它仍然在一路向下推动右二级跳水

.left {
  height: 400px;
  width: 60%;
  float: left;
  background-color: red;
  display: block;
}
.right {

  width: 30%;
  float: right;
  background-color: green;
   display: block;
}