CSS for centering and centering of remaining space

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

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>

Answer 2

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!