Align responsive div to the right within container - html

Question

I have one parent div and two child divs. My aim is to center one div and align the other div to the right and make both responsive.
I can't seem to find the conventional way to do align the second one to the right within this type of setup:
<div id="container">
<div id="middle">Centered to middle</div>
<div id="right">I want to be to the 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 is a jsFiddle. How do we crack this puzzle?

Answer 1

Make it inline-block, otherwise the second div would always be on the second line
Reduce their width in percentage, making it 33%
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 to middle</div>
<div id="right">I want to to be to the right</div>
</div>

Answer 2

Added a pseudo element as left column, so the layout becomes to [left] + [middle] + [right] and set table for the parent and table-cell for the children.
JSFiddle Demo
#container {
display: table;
table-layout: fixed;
width: 100%;
}
#container:before, #middle, #right {
display: table-cell;
}
#container:before {
content:"";
}
#middle {
background: aqua;
width: 50%;
}
#right {
background: yellow;
}
<div id="container">
<div id="middle">Centered to middle</div>
<div id="right">I want to to be to the right</div>
</div>
There is another approach by using flexbox, can be found here.