title: insert vertical divider line between two nested divs, not full height
body: <p>I have float left and float right <code>&lt;div&gt;</code> nested within a light blue box div as shown in the image below.  I can't figure out how to insert a vertical line between them as shown in this image: </p>
  
  <p><a href="https://i.stack.imgur.com/t3mG4.png" rel="noreferrer"><img src="https://i.stack.imgur.com/t3mG4.png" alt="enter image description here"></a></p>
  
  <p>That has the following properties:</p>
  
  <p>1) padding/margin on either side that I can control or looks reasonable (i.e. not much closer to one div than it is the other)</p>
  
  <p>2) leaves a margin above and below as shown, i.e. does not extend the full vertical width of light blue div</p>
  
  <p>3) dynamically maintains #1 and #2 as browser window gets bigger/smaller and blue box size increases/decreases with it</p>
  
  <p>I'm looking for a simple, preferably CSS-only solution.</p>
  
  <p>Relevant CSS:</p>
  
  <pre><code>#left {
    position: relative;
    float: left;
    width: 44%;
    margin: 0;
    padding: 0;
  }
  
  #right {
    position: relative;
    float: right;
    width: 49%;
    margin: 0;
    padding: 0;
  }
  
  #blue_box {
    position: relative;
    width: 45%;
    min-width: 400px;
    max-width: 600px;
    padding: 2%;
    margin-left: 40%;
    overflow: auto; /*needed so that div stretches with child divs*/
  }
  </code></pre>