将内联块div对齐到容器元素的顶部。

Question

将内联块div对齐到容器元素的顶部。

当两人inline-block divS有不同的高度，为什么两者中较短的不对齐到容器的顶部？演示):

.container { 

    border: 1px black solid;

    width: 320px;

    height: 120px;    

}

.small {

    display: inline-block;

    width: 40%;

    height: 30%;

    border: 1px black solid;

    background: aliceblue;    

}

.big {

    display: inline-block;

    border: 1px black solid;

    width: 40%;

    height: 50%;

    background: beige;    

}

<div class="container">

    <div class="small"></div>

    <div class="big"></div>

</div>

我怎样才能把小的对齐？div在它的容器顶部？