Organização de divs com css

Boa tarde!

Pessoal estou precisando retirar os espaços vazios, prencher com o bloco azul e o marron, segue html e css utilizado.

HTML

<div class="bloco">
        <div id="one" class="normal">One</div>
        
        <div id="two" class="normal">Two</div>
            
        <div id="three" class="normal">Three</div>
        
        <div id="four" class="normal">Four</div>
        
        <div id="five" class="normal">Five</div>
        
        <div id="six" class="normal">Six</div>
    </div>

	 

	CSS

* {

    margin: 0;
    padding: 0;
}

.bloco{
    display: flex;    
    flex-wrap: wrap;    
}

.normal {
    height:100px;    
    width:30%;
    display:inline-block;
}

#one {
    background-color:red;
}
#two {
    background-color:green;
    height:200px;
}
#three {
    background-color:yellow;    
}
#four {
    background-color:blue;
}

#five {
    background-color:purple;
    
}
#six {
    background-color:brown;
}

#seven {
    background-color:black;
}

	 

	 

	 

	 

	 

	![imagem](https://forum.imasters.com.br/monthly_2018_03/5a9d991f5d7a5_Semttulo.png.730f8d49b7e21d0be999d5b1f5b45e78.png)