Wanting height of two objects to match in spite of expanding content - html

Question

I have a page that has three main section:
project-arrow-box
white-green
light-gray
project-arrow-box and light-gray are on the left side of the page and white-green is on the right. I am wanting light-gray and white-green's bottom to meet at the same point and touch my footer. My white-green's section will change size based if validation errors are made or whatever the case may be. On different screen sizes these two divs (light-gray and white-green) very in placement. Sometimes light-gray surpasses white-green and vise versa. Again, I want the end/bottom of those two divs to touch my footer regardless of the screen size.
I have tried adding bottom: 0; to both of light-gray and white-green, but this did not help. I have white-green's height set to auto, so it adapts to the expanding nature of this div. This happened before the footer, so the footer has nothing to do with any of these issues.
What can I do so this becomes possible?
.project_arrow_box {
position: relative;
/*background: rgb(69,186,149);*/
background: #00a16d;
border: 4px solid #00a16d;
width: 33%;
height: 800px;
z-index: 99;
}
#project-content-wrap {
margin: 30% 13%;
}
.white-green {
background-color: rgb(241, 250, 247);
width: 66.56%;
height: auto;
z-index: 55;
margin-left: 33.4%;
margin-right: 0;
position: absolute;
top: 0;
right: 0;
text-align: center;
}
#white-green-section {
position: relative;
left: 30%;
text-align: center;
opacity: 0;
}
.light-gray {
background-color: #E0E0E0;
width: 33.5%;
padding-top: 150px;
bottom: 0;
margin-bottom: 0;
}
.light-gray-container {
left: 15%;
position: relative;
width: 80%;
height: auto;
padding-bottom: 40px;
}
<div class="project_arrow_box">
<div id="project-content-wrap">
</div>
</div>
<div class="white-green">
<div id="white-green-section">
</div>
</div>
<div class="light-gray">
<div class="light-gray-container">
</div>
</div>

Answer 1

You can do this with Flexbox
body, html {
margin: 0;
padding: 0;
}
.container {
display: flex;
}
.left {
display: flex;
flex-direction: column;
flex: 0 0 33%;
}
.one {
background: #A1EB88;
flex: 100vh;
}
.two {
flex: 100vh;
background: #F2BB7C;
}
.three {
background: lightblue;
flex: 1;
}
footer {
height: 50px;
background: red;
width: 100%;
}
<div class="container">
<div class="left">
<div class="one">One</div>
<div class="two">Two</div>
</div>
<div class="three">Three</div>
</div>
<footer>Footer</footer>

Answer 2

Using Flexbox is likely the simplest way to pull that off:
HTML:
<div class="container">
<div class="left-container">
<div class="project-arrow-box">
<p>
</p>
</div>
<div class="light-grey">
<p>
</p>
</div>
</div>
<div class="white-green">
<p>
</p>
</div>
</div>
<div class="footer">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, vero?
</p>
</div>
CSS:
.container, .left-container, .white-green {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
margin: 0;
}
.left-container {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.project-arrow-box {
background-color: white;
flex-grow: 1;
padding: 1em;
}
.light-grey {
background-color: #aaa;
flex-grow: 1;
padding: 1em;
}
.white-green {
background-color: #ccFFcc;
flex-grow: 1;
padding: 1em;
}
.footer {
background-color: #000;
color: #fff;
}
See: https://jsfiddle.net/bL2ymhps/1/