I struggled with this one. Eventually, I made an empty div to hold the three divs, I set the empty div's position to relative and 2 and 3 to absolute, then pushed them left. I know there is a better way, I just couldn't get anything to work. CodePen-1
I created an empty div with three black divs inside. I set the empty div's postion to relative and the three black divs to absolute. I set the top value of div two for 10 px less than the height of div one, and repeated with div three relative to div two. I set div three left 700px and then split the difference to line up div 2 between the two others. CodePen-2
I nested div 2 in div 1, set the colors of both, set div 1's top margin to 10 and to auto on the side margins to center it. I calculated that a 200px box perfectly centered in a 400px box would have a margin of 100px around it.