keep two div block inline while resizing browser to its smallest width

In the following html layout I want the two div tags with 'section' and 'nav' id stay next to each other, for any browser width and even resizing the browser to the smallest width, keep them them inline. I tried many css codes from the web but I could not find any solution, is it possible and How could I resolve this problem. By the way I could give a fixed width to the 'nav' div but the 'section' div width should be kept auto.

#header {
  text-align: center;
  padding: 5px;
}
#content {
  margin: 0 auto;
  width: 100%;
  float: left;
  display: inline-block;
}
#nav {
  line-height: 30px;
  float: left;
  padding: 5px;
}
#section {
  float: right;
  padding: 10px;
  border-top-left-radius: 20px 20px;
}
#footer {
  position: initial;
  clear: both;
  text-align: center;
  padding: 5px;
}

<div id="header">
  <h1>Header</h1>
</div>
<div id="content">
  <div id="nav">
    One<br>
    Two<br>
  </div>
  <div id="section">
    <h1>London</h1>
    <p>
      London is the capital city of England. It is the most populous city in the United Kingdom,
      with a metropolitan area of over 13 million inhabitants.
    </p>
  </div>
</div>
<div id="footer">Copyright © stackoverflow.com</div>