html - css将左侧的一项和右侧的两项相互折起

This question already has answers here:

Left column and stacked right column using flexbox CSS [duplicate]
                                
                                    （2个答案）
                                
                        
                                去年关闭。
            
                    
我有3个div容器，并且我希望第一个div容器位于左侧，并且高度与右侧的2个容器一样大，但是问题是右侧的容器没有包装在一个父容器中。基本上我想做的是-


是否有可能在不更改html结构的情况下做到这一点？还是唯一可行的解​​决方案是将这两个元素包装在一个父容器中？

这是我的html结构-

<div class="container">
  <div class="block1">text here</div>
  <div class="block2">text here</div>
  <div class="block3">text here</div>
</div>

谢谢您的帮助！

最佳答案

我用grid制成

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height:400px;
}

.container div {
  color:#fff;
  text-align:center;
}

.block1 {
  grid-row: 1 / 5;
  grid-column: 1 / 3;
  background:red;
}

.block2 {
  grid-row: 1 / 3;
  grid-column: 3 / 3;
  background:greenyellow;
}

.block3 {
 grid-row: 3 / 5;
  grid-column: 3 / 3;
  background:dodgerblue;
}

<div class="container">
  <div class="block1">text here 1</div>
  <div class="block2">text here 2</div>
  <div class="block3">text here3</div>
</div>