title: Align 2 divs side by side vertically centered of the page
body: <p>I am trying to align two divs vertically centered based on the browsers view height. I'm looking to get these divs side by side too.</p>
  
  <p>I can get both divs side by side, but can't get them down 50% of the vh. When I place them <code>top, left: 50%;</code>, they start there and then continue.</p>
  
  <p>Is it possible to have the 2 vertical center and next to each other?</p>
  
  <p>Here's the JSfiddle <a href="https://jsfiddle.net/peggory/wxjd5z9w/2/" rel="nofollow noreferrer">link</a></p>
  
  <p>Or if it is easier, here's the code directly:</p>
  
  <p>CSS:</p>
  
  <pre><code>html {
  /*set website minimum resolution*/
   min-width: 1366px;
   min-height: 768px;
   margin:0;
   color:#fff
  }
  .wrapper{
   /*set div to 100% browser width/height*/ 
   /*width and height fall back*/
   height: 100%;
   width: 100%;
   /*preferable height*/
   height:100vh;
  }
  .frame-work {
   /*move this div top/middle of screen*/ 
    text-align: center;
    position: absolute;
    top:50%;
    left: 50%;
  }
  .content {
    /*place inside frame-work side-by-side*/
    width:480px;
    height:300px;
    display: inline-block;
    position: relative;  
    background-color:#000
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="wrapper"&gt; &lt;!--100% w/h browser--&gt;
      &lt;div class="frame-work"&gt; &lt;!--container for 2 divs--&gt;
          &lt;div class="content"&gt; &lt;!--left div--&gt;
              Lorem Ipsum Left
          &lt;/div&gt;
          &lt;div class="content"&gt; &lt;!--right div--&gt;
              Lorem Ipsum Right
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>