CSS Child2 VariableWidth based on Child1 VariableWidth & Parent Max-Width? (jsFiddle) - html

Question

I have a parent container that has two children sections. http://jsfiddle.net/J9e2X/21/
I would like the parent container to have a max width, and the first child section (variable width content) to have a max-width that overflow-x: scroll when the content is greater than the max-width.
I would like the second child section to cover the width of the parent container - the width of the first child section, and overflow-x: scroll when the second child section content width + the first section section width is greater than the parent container max-width.
Here's the HTML:
<div class="page-container">
<div class="container">
<div class="section1"><div class="content1">element1</div></div>
<div class="section2">
<div class="content2">
<input type="text" class="formFormat" value="element2.1 element2.2" />
</div>
</div>
</div>
</div>
And some attempted CSS (right now, the second child section breaks the line when the width of the first child content pushes the second child section too far, and it also doesn't cover the width of the parent container minus the width of the first section, + overflow-x):
.container {
width: 72%;
max-width: 72%;
float: left;
border: 1px solid rgba(145, 145, 145, 0.7);
}
.section1 {
float: left;
width: auto;
overflow-x: scroll;
max-width: 33%;
height: 31px;
display: table;
border: 1px solid rgba(145, 145, 145, 0.7);
}
.content1 {
display: table-cell;
vertical-align: middle;
padding-left: 8px;
padding-right: 4px;
overflow-x: scroll;
}
.section2 {
float: left;
width: auto;
height: 31px;
overflow-x: scroll;
padding: 2.5%;
line-height: 1.42;
border: 1px solid rgba(145, 145, 145, 0.7);
}
.content2 {
display: table-cell;
vertical-align: middle;
padding-left: 2%;
padding-right: 2%;
float: left;
}
.page-container {
height: 50%;
width: 50%;
margin: 0 auto;
padding-top: 5%;
}
.formFormat {
width: 100%;
border: none;
border-radius: 0px;
-webkit-box-shadow: none;
box-shadow: none;
}