Responsive CSS Complex Grid - Unsemantic Framework

I need a very specific solution for a CSS Grid that must not conflict with the Unsemantic CSS Framework (which we use for responsive behavior). Review the picture attached however these rules must apply to your solution: * The 3 center columns must stop where it meets the yellow bottom row * The height of the MIDDLE TABLE-CELL which currently includes the yellow bottom row must be the exact same height combined as the LEFT and RIGHT (green) TABLE-CELL's (see picture) * You cannot use html Tables due to responsive desires * It must be a css percent (%) only solution - no pixels anywhere - but cannot require a fixed percent on the bottom row because it's height will be dynamic from website to website. * The 5 columns must stretch to 100% of the height of the browsers viewport * The BOTTOM ROW must stay in its bottom position at different viewport heights. * There can be no javascript / jquery as part of the solution. Css only. You can show me your solution without any of my code (including Unsemantic CSS framework) as long as it works but it cannot rely on any other responsive framework. In each of the cases, I do not want to adjust any heights by the using the actual height of the BOTTOM yellow row as this row height will be changing depending upon the content.