Responsive design: getting content in middle to flow - html

Question

I have a layout where there is a button either side of the screeen.
The content is between the buttons.
How can I make the content display between the buttons when the view is large enough, but drop down and fill remaining space when the content starts to overlap the space between the buttons.
The buttons are a fixed size
nav ul li:first-child {
float: left;
}
nav ul li:last-child {
float: right;
}
nav ul li:first-child,
nav ul li:last-child {
display: table-cell;
}
<nav role="navigation">
<ul>
<li>
<input type="submit" value="Back">
</li>
<li>
<button>next</button>
</li>
</ul>
</nav>
<div id="content">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<p>"#content" should extract itself from between buttons to next 'line' when page gets smaller, then when that is too small as well, it can start blocking up the inputs.</p>

Answer 1

Fiddle here: https://jsfiddle.net/8g25hjw5/
By doing something like this:
<nav role="navigation">
<ul>
<li>
<input type="submit" value="Back">
</li>
<li>
<button>next</button>
</li>
</ul>
</nav>
<div id="content">
<div>
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
ul {
list-style: none;
}
nav ul li:first-child {
float: left;
}
nav ul li:last-child {
float: right;
}
#content {
display: table;
}
#content div {
display: table-row;
}
#content input {
display: table-cell;
}
#media screen and (max-width: 700px) {
#content {
clear: both;
}
}