CSS for centering and centering of remaining space - html

Question

I have a current issue in my current project, where i have an area in which i want to center some text. This text can be different from each use of the area.
This part i have fully understood, but i want to place another piece of text, exactly in the center of the remaining space between the end of the first text and the end of the area.
How would i structure my css and html to make this possible?
The image below should help display what it is, that i want to do:
html,
body {
height: 100%;
text-align: center;
}
#left {
width: 200px;
display: inline-block;
background: #f00;
height: 200px;
justify-content: center;
}
#right {
display: inline-block;
background: #0f0;
height: 200px;
}
<div id="left">
CONTENT
</div>
<div id="right">
Other content
</div>
Edit:
Sorry about not including code
An attempt i took: http://jsfiddle.net/5jRaY/298/
I get the red block to fit as wanted, other than the div should wrap the container. My issue is that i can't get the green box to fill the remaining space of the page.

Answer 1

You can try a different layout. This is what I will use:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper {
display: table;
width: 100%;
text-align: center;
}
#one,
#two,
#three {
display: table-cell;
width: 33.333%;
}
#one {
width: 200px;
height: 200px;
background: white; /*Change color to see it*/
}
#two {
background: red;
height: 200px;
}
#three {
height: 200px;
background: green;
}
<div id="wrapper">
<div id="one"></div>
<div id="two">CONTENT</div>
<div id="three">Other content</div>
</div>
Let me know if it works for you!

Answer 2

Hope this helps:
#container {
height: 200px;
text-align: center;
position: relative;
}
#left {
width: 200px;
margin: auto;
height: 100%;
background: #f00;
}
#right {
top: 0;
right: 0;
bottom: 0;
background: #0f0;
position: absolute;
width: calc(50% - 100px); /* 100px is 50% of #left */
}
<div id="container">
<div id="left">
CONTENT
</div>
<div id="right">
Other content
</div>
</div>