I found [this code](http://jsfiddle.net/RHM5L/7/) from [this](https://stackoverflow.com/questions/22092724/align-inline-block-divs-to-top-of-container-element) , but now I'm trying to align another div `class="new"` to be inline and outside the `container div` . I have tried to use `vertical-align:top`, `float`,`display: inline-block` but they didn't work.  

What am I missing ?

This is what I'm trying to do.
HTML

```
<div class="container">
    <div class="small"></div>
    <div class="big"></div>
</div>
<div class="new"></div>

```

CSS

```
.container{ 

    border: 1px black solid;
    width: 320px;
    height: 120px;    
    padding: 10px;
}

.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;    
}
.new{
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: gray;
    vertical-align: top;
}

```