Anda perlu menambah vertical-align atribut pada kedua-dua div kanak-kanak.

Jika.small始终较短，则只需将该属性应用于.small. Walau bagaimanapun, jika mana-mana daripada mereka mungkin yang tertinggi, maka atribut itu harus digunakan untuk .small和.big.

.container{ 
    border: 1px black solid;
    width: 320px;
    height: 120px;    
}

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue; 
    vertical-align: top;   
}

.big {
    display: inline-block;
    border: 1px black solid;
    width: 40%;
    height: 50%;
    background: beige; 
    vertical-align: top;   
}

Penjajaran menegak mempengaruhi kotak sel sebaris atau meja, sifat ini mempunyai banyak nilai yang berbeza. Sila lihat https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align untuk butiran lanjut.

Kerana secara lalai, vertical-align ditetapkan kepada garis dasar.

Gunakan vertical-align:top sebaliknya:

.small{
    display: inline-block;
    width: 40%;
    height: 30%;
    border: 1px black solid;
    background: aliceblue;   
    vertical-align:top; /* <---- this */
}

http://jsfiddle.net/Lighty_46/RHM5L/9/

Atau seperti yang @f00644 katakan, anda juga boleh memohon float pada elemen kanak-kanak.