title: Display inline-block pushing final element below other elements
body: <p>HTML:</p>
  
  <pre><code>&lt;div id='Content'&gt;
  &lt;div&gt;
      &lt;div&gt;
          &lt;pre&gt;SOME TEXT&lt;/pre&gt;
          &lt;div id='map1' style='width:450px;height:350px;'&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;pre&gt;SOME TEXT&lt;/pre&gt;
          &lt;div id='map2' style='width:450px;height:350px;margin-left:-17px;'&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style='width:300px;'&gt;
      &lt;h1&gt;Contact Us&lt;/h1&gt;&lt;br&gt;
      &lt;form action="/Account/Contact" onsubmit="return SubmitMessageForm(this,event,this.childNodes[1]);" method="post"&gt;
          &lt;pre style="display:none;"&gt;&lt;/pre&gt;
          &lt;label&gt;
              &lt;span&gt;Person To Email&lt;/span&gt;
              &lt;select name='ToContact' id='ToContact'&gt;
                  &lt;option value='0'&gt;Mark&lt;/option&gt;
                  &lt;option value='1'&gt;Paul&lt;/option&gt;
              &lt;/select&gt;
          &lt;/label&gt;
          &lt;label&gt;
              &lt;span&gt;Name&lt;/span&gt;
              &lt;input type="text" id="Name" name="Name"/&gt;
          &lt;/label&gt;&lt;br&gt;
          &lt;label&gt;
              &lt;span&gt;Your Email&lt;/span&gt;
              &lt;input type="email" id="Email" name="Email"/&gt;
          &lt;/label&gt;&lt;br&gt;
          &lt;label&gt;
              &lt;span&gt;Message&lt;/span&gt;
              &lt;textarea name="Message" rows="8" id="Message"&gt;&lt;/textarea&gt;
          &lt;/label&gt;&lt;br&gt;
          &lt;label&gt;&lt;input style='width:50px;' type="submit" value="Send"/&gt;&lt;/label&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body &gt; div#Content {
      text-align:center;
      white-space:nowrap;
  }
  body &gt;div#Content &gt;div {
      display:inline-block;
  }
      body &gt;div#Content &gt;div &gt;div {
  
      }
          body &gt;div#Content &gt;div &gt;div &gt;pre {
              line-height:20px;
              margin-right:50px;
          }
          body &gt;div#Content &gt;div &gt;div &gt;div {
              display:inline-block;
          }
          body &gt;div#Content &gt;div &gt;div &gt;h1 {
              font-size:20px;
          }
          body &gt;div#Content &gt;div &gt;form {
              width:100%;
          }
              body &gt;div#Content &gt;div &gt;form &gt;label {
                  float:left;
              }
                  body &gt;div#Content &gt;div &gt;form &gt;label &gt;span {
                      float:left;
                  }
                  body &gt;div#Content &gt;div &gt;form &gt;label &gt;input, body &gt;div#Content &gt;div &gt;form &gt;label &gt;textarea, body &gt;div#Content &gt;div &gt;form &gt;label &gt;select {
                      width:300px;
                      float:left;
                  }
  </code></pre>
  
  <p>I'm trying to display two div elements side by side, but the second div is pushed down by about 500px for some reason. How do I make these two elements go side by side but also be aligned in the center of the parent div? When I try to remove display:inline-block and add float left it doesn't center</p>
  
  <p><img src="https://i.stack.imgur.com/AptII.png" alt="What it currently looks like"></p>