I am trying to achieve this layout, but struggling

https://ibb.co/yWPg8SR

I split in to two columns initially, the left column having two divs one on top of the other. The right having two rows, with divs within them.

Here's my html

<div class='home-grid'>

            <div class='home-grid-left'>

                <div class='home-grid-left-top' style='background: url(images/spacer.png)'><a href=''><span>SALE</span></a></div>
                <div class='home-grid-left-bottom' style='background: url(images/spacer.png)'><a href=''></a></div>

            </div>

            <div class='home-grid-right'>

                <div class='home-grid-right-top'>

                    <div class='home-grid-right-top-left' style='background: url(images/spacer.png)'><a href=''></a></div>
                    <div class='home-grid-right-top-right' style='background: url(images/spacer.png)'><a href=''></a></div>

                </div>

                <div class='home-grid-right-bottom'>

                    <div class='home-grid-right-bottom-left' style='background: url(images/spacer.png)'><a href=''></a></div>
                    <div class='home-grid-right-bottom-right' style='background: url(images/spacer.png)'><a href=''></a></div>

                </div>

            </div>

        </div> 

and here is my css

.home-grid {position: relative; display: flex; height: 450px; margin: 50px 0}
.home-grid div {position: relative;}
.home-grid div a {position: absolute; top: 0; right: 0; bottom: 0; left: 0}
.home-grid-left {position: relative; flex:1; margin-right: 10px; flex-direction: column; background-color: azure}
.home-grid-left-top {margin-bottom: 10px; min-height: 200px}
.home-grid-left-bottom {flex: 2; flex:auto}

.home-grid-right {position: relative; flex: 3; background-color: aliceblue} 

I am stuck on the home-grid-left-bottom as it isn't showing. The spacer.png is just an image placeholder, the final version will have images on each div.

Can anyone help?

Thanks