Почему желтый блок не может "прилипнуть" к синему блоку хотя свободное место есть?

http://jsfiddle.net/72gp6qkf/29/

.article-description {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        height: 250px;
        width: 900px;
        font-size: 16px;
        line-height: 20px;
    }
        .p1 {
            vertical-align: top;
            display: inline-block;
            background-color:blue;
            height: 120px;
            width:  375px;
        }
        .p2 {
            display: inline-block;
            vertical-align: top;
            background-color:red;
            height: 180px;
            width:  345px;
        }
        .p3 {
            vertical-align: top;
            background-color:yellow;            
            display: inline-block;
            height: 180px;
            width: 280px;
        }

Понимаю, что вопрос глупый но все же...