Html 将分区2和分区3堆叠在分区1旁边

有人能帮我把我的div像这张图上那样叠起来吗？它必须在CSS中完成，因为我不能拆分为两个单独的列。我的代码应该如下所示：

<div class="container">
    <div class="div1">
        Div #1
    </div>
    <div class="div2">
        Div #2
    </div>
    <div class="div3">
        Div #3
    </div>    
</div>

第1分部
第2分部
第3分部

---

我能想到的唯一方法是设置一些静态宽度和高度。你可以试试下面的方法

我个人不建议这样做，我建议使用表或div并创建一些列/行。它将使布局更加流畅和动态。如果您需要添加更多元素，它将自动为您调整

如果避免使用列和行，则必须在写出之前计算所有内容

<div class='out'>
    <div class='in big'>one</div>
    <div class='in sm'>two</div>
    <div class='in sm'>three</div>
</div>

.in {
    float: left;
    background: tomato;
    border-right: 1px solid white;
    border-top: 1px solid white;
}
.out {
    width: 200px;
    height: 400px;
}
.big {
    width: 99px;
    height: 399px;
}
.sm {
    width: 99px;
    height: 199px;
}

一
二
三
.在{
浮动：左；
背景：番茄；
右边框：1px纯白；
边框顶部：1px纯白；
}
.出去{
宽度：200px；
高度：400px；
}
.大{
宽度：99px；
高度：399px；
}
.sm{
宽度：99px；
高度：199px；
}

---

还有一把小提琴：

它很管用！谢谢你的时间，阿卜杜勒！为什么你认为@TJ外盒需要有一个静态的宽度/高度（400x200）@AbdulAhmad