Ajustes de elementos verticalmente

[roeboy2]

Código HTML:

<article id="article_a">
            <p>ejemplo1</p>
        </article>
        <article id="article_b">
            <p>ejemplo2</p>
        </article>
        <article id="article_a">
            <p>ejemplo3</p>
        </article>      
        <article id="article_b">
            <p>ejemplo4</p>
        </article>
        <article id="article_a">
            <p>ejemplo5</p>
        </article>          
 
/*----------------------------------------------*/
 
#article_a {
    width: 30%;
    height: 300px;
    background-color:#D4D4D4;
    display: inline-block;
    float: left;
    margin-left: 5px;
    vertical-align: top;
}
    
#article_b {
    width: 30%;
    height: 50px;
    background-color: red;
    display:  block;
    float: left;
    margin-left: 5px;
    vertical-align: top;
}
 

y mi pretension es como esta imagen...