I have 2 divs in a container, one in the center and one to the right. I want the width of the right div to be **responsive**. Currently, only the `max-width` on the centered one works. 

See this [jsFiddle](http://jsfiddle.net/aoktptuc/4/).

How do I make the right div responsive too?

HTML:

```
<div id="container">

    <div id="middle">Centered</div>

    <div id="right">Make me responsive</div>

</div>

```

CSS:

```
#container {
    width: 100%;
    text-align: center;
    position: relative;
}

#middle {
    background: #ddd;
    margin: 0 auto;
    position: relative;
    width: 100%;
    max-width:300px;
    height:300px;
    display: inline-block;
    vertical-align: top;
}

#right {
    background:yellow;
    width:100%;
    max-width:300px;
    display: inline-block;
    vertical-align: top;
    position: absolute;
}

@media screen and (max-width: 350px) {
    #right {
        display: none;
    }
}

```