html - Align responsive div to the right within container -

i have 1 parent div , 2 child divs. aim center 1 div , align other div right , make both responsive.

i can't seem find conventional way align second 1 right within type of setup:

<div id="container">      <div id="middle">centered middle</div>      <div id="right">i want to right</div>  </div> 

css:

#container {     position: relative;     width: 100%; }  #middle {     margin: 0 auto;     position: relative;     width: 100%;     max-width:150px;     height:300px; }  #right {     max-width:150px;     width:100%; } 

here jsfiddle. how crack puzzle?

1. make inline-block, otherwise second div on second line

2. reduce width in percentage, making 33%

3. remove max-width

#container {      position: relative;      width: 100%;      text-align:middle;  }  div{      display:inline-block;  }  #middle {      background: #ddd;      margin: 0 auto;      position: relative;      width: 100px;      margin-left:40%;      height:300px;  }    #right {      background:yellow;      width:33%;  float:right;  }

<div id="container">            <div id="middle">centered middle</div>            <div id="right">i want to right</div>        </div>