I'm trying to recreate this image on the LEFT side. On the right is what I have now. my current CSS Code correlating to it is below.

.treemap {

display: flex;

height: 150px;

}

.treemap:first-child > div:first-child {

flex-basis: 25%;

background: midnightblue;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.treemap:first-child > div:first-child > div {

background: lightskyblue;

border: dotted;

}

.treemap:first-child > div:first-child > div:first-child {

width: 40%;

height: 50%;

margin: 10px;

text-align: center;

}

.treemap:first-child > div:first-child > div:last-child {

width: 80%;

height: 25%;

margin: 10px;

}

.treemap:last-child > div:last-child {

flex-basis: 75%;

background: ivory;

display: flex;

flex-direction: column;

}

.treemap:last-child > div:last-child > div {

background: khaki;

width: 41px;

height: 20px;

margin: 6px;

}

Use nested flexible box layouts in this section. Use nested flexible box layouts in this