title: Responsive: display: inline-block
body: <p>I have two page sections, one on the left (my menu) and one on the right (my content). Now, they are both displayed as inline-block types, so that the content can be displayed to the right of them menu and then fall below the menu on smaller screens when required.</p>
  
  <p>I was wondering, whether it is possible to make the content box resize responsively, until a minimum width, before it aligns under my menu?</p>
  
  <p>Here is how my code is set out:</p>
  
  <pre><code>.menu {
     display: inline-block;
     width: 300px;
     vertical-align: top;
     background-color: #222;
  }
  
  .content {
     display: inline-block;
     width: 100%;
     max-width: 650px;
     vertical-align: top;
     background-color: #222;
  }
  </code></pre>
  
  <p>Been stuck on this for around two hours now, had a look around and can't seem to find any similar questions here or online resources, can anyone shed some light on how to overcome this problem?</p>