Q:

How to position two blocks of text where one block is composed of two blocks?

Here, the red and black are two blocks of text with the same width as the blue, but together, both blocks have the same height as the blue.
Currently, I have .

A:

Here is a modern approach using a nested flexbox layout. It unfortunately needs some extra markup (container divs), but is very flexible in terms of width and height, which is extremely hard to achieve with other methods. You need to play with the flex values (flex-grow, flex-shrink,flex-base) to achieve the results you want. It behaves pretty much like table cells though.
A good starting point to wrap your head around flexbox is this nice overview. The height on the black container is just to demonstrate, that the elements scale nicely to every dimensions you want. Notice, that the right side expands to the same size despite no height being declared.

div{padding:5px;}

#container{
  border:1px solid red;
  display:flex;
  align-items:stretch;
}
#container > div{
   flex:1 1 auto;  
}
#left{
  display:flex;
  flex-direction:column;
  border:1px solid blue;
}
#left > div{
   flex:1 1 auto;   
}
#red{background-color:red;}
#black{background-color:black;color:white;height:100px;}
#right{
   background:#aaf;
}
<div id="container">
  <div id="left">
    <div id="red">
    red container
    </div>
    <div id="black">
      black container
      
    </div>
  </div>
  
  <div id="right">
    right
    <br>
    side
  </div>
</div>

