вы можете использовать сетку, чтобы сделать это легко.Единственное, что вам, возможно, придется сделать, это создать новые элементы div, чтобы поместить их в то, что вы уже создали.
Надеюсь, это будет полезно для вас.
body{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "one two"
"three three";
}
.one{
grid-area: one;
background-color: yellow;
}
.two{
grid-area: two;
background-color:green;
}
.three{
grid-area: three;
background-color: red;
}
<body>
<div class="one">
one
</div>
<div class="two">
two
</div>
<div class="three">
Three
</div>
</body>
</html>