title: Table and div positioning isn't lining up
body: <p>So, here is my problem; I am trying to position a <code>div</code> that is right next to a <code>table</code>. I want them to line up side by side. Like it is, they line up with the text above all of the rest of it. Check out my vision board below:</p>
  
  <p><a href="https://i.stack.imgur.com/dF4Ky.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dF4Ky.png" alt="Text"></a>
  <a href="https://i.stack.imgur.com/NOqe7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NOqe7.png" alt="Rest"></a></p>
  
  <p>Except I actually want the words "Signature Editor" to be at the top (photo problem) rather than the bottom. So that is what I want. It all to be lined up side by side. However, here is what is actually is:
  <a href="https://i.stack.imgur.com/HZgI8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HZgI8.png" alt="Full signature"></a></p>
  
  <p>As you can see, the "Signature Editor" text is above the table rather than lined up like how I want it to be (see my vision board).</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    display: inline-block;
  }
  #signatureEditorText {
    font-family: 'Source Sans Pro', sans-serif;
  }
  #image {
    width: 125px;
    height: 125px;
    border-radius: 50%;
    margin-top: -45px;
  }
  .spacer {
    width: 15px;
  }
  hr {
    height: 200px;
    width: 7.5px;
    border-radius: 20px;
    border: none;
    background-color: cornflowerBlue;
  }
  #fullName {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    color: orange;
    margin-top: -40px;
    }
  #job {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 15px;
    margin-top: -12px;
    }
  #jobLocationText {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 14px;
    margin-top: -3px;
  }
  .otherText {
    color: seaGreen;
  }
  #emailAddress {
      margin-top: 5px;
  }
  #extra1, #extra2, #extra3, #extra4, #extra5, #extra6 {
      white-space: pre-wrap;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id = "signatureEditorText"&gt;&lt;h2&gt;Signature Editor&lt;/h2&gt;&lt;/div&gt;
  &lt;table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;img src = "https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id = "image" title = "Picture to be displayed"&gt;
          &lt;/td&gt;
          &lt;td  class = "spacer"&gt;&lt;/td&gt;
          &lt;td rowspan = "4"&gt;
              &lt;hr&gt;
          &lt;/td&gt;
          &lt;td  class = "spacer"&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;center&gt;&lt;div id = "fullName"&gt;Billy Staples&lt;/div&gt;&lt;/center&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;center&gt;&lt;div id = "job"&gt;&lt;i&gt;Programmer&lt;/i&gt;&lt;/div&gt;&lt;/center&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;center&gt;&lt;div id = "jobLocationText"&gt;at &lt;b id = "jobLocation"&gt;My Company&lt;/b&gt;&lt;/div&gt;&lt;/center&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table id = "contactInfo" cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div id = "emailAddress"&gt;&lt;span class = "otherText"&gt;Email: &lt;/span&gt;&lt;span id = "emailAddressText"&gt;email@domain.com&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div id = "phoneNumber"&gt;&lt;span class = "otherText"&gt;Phone: &lt;/span&gt;&lt;span id = "phoneNumberFirst"&gt;111&lt;/span&gt;-&lt;span id = "phoneNumberSecond"&gt;222&lt;/span&gt;-&lt;span id = "phoneNumberThird"&gt;3333&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div id = "officePhoneNumber"&gt;&lt;span class = "otherText"&gt;Office Phone: &lt;/span&gt;&lt;span id = "officePhoneNumberFirst"&gt;444&lt;/span&gt;-&lt;span id = "officePhoneNumberSecond"&gt;555&lt;/span&gt;-&lt;span id = "officePhoneNumberThird"&gt;6666&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div id = "address"&gt;&lt;span class = "otherText"&gt;Address: &lt;/span&gt;&lt;span id = "addressText"&gt;1379 Philadelphia Avenue&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div id = "website"&gt;&lt;span class = "otherText"&gt;Website: &lt;/span&gt;&lt;span id = "websiteText"&gt;example.com&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div id = "extra1"&gt;&lt;span class = "otherText" id = "extra1Label"&gt;&lt;/span&gt;&lt;span id = "extra1Text"&gt; &lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div id = "extra2"&gt;&lt;span class = "otherText" id = "extra2Label"&gt;&lt;/span&gt;&lt;span id = "extra2Text"&gt; &lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div id = "extra3"&gt;&lt;span class = "otherText" id = "extra3Label"&gt;&lt;/span&gt;&lt;span id = "extra3Text"&gt; &lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div id = "extra4"&gt;&lt;span class = "otherText" id = "extra4Label"&gt;&lt;/span&gt;&lt;span id = "extra4Text"&gt; &lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div id = "extra5"&gt;&lt;span class = "otherText" id = "extra5Label"&gt;&lt;/span&gt;&lt;span id = "extra5Text"&gt; &lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;div id = "extra6"&gt;&lt;span class = "otherText" id = "extra6Label"&gt;&lt;/span&gt;&lt;span id = "extra6Text"&gt; &lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And a JSFiddle of it is <a href="https://jsfiddle.net/CyanCoding/he84kv8n/20/" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Also, here are some methods I have tried: <code>display: inline;</code>, <code>display: inline-block;</code>, <code>display: block;</code>. </p>
  
  <p>Thanks!</p>