title: Align 2 tables horizontally HTML
body: <p>i am trying to align my tables horizontally. i put them into a same div like so. i also tried to use: inline-block for each table but its does not work. The "colours" table always stay at the bottom and not on the same line as the "parts" table</p>
  
  <pre><code>&lt;div id="tables"&gt;
      &lt;table class="parts"&gt;
      &lt;caption&gt;CUSTOMISABLE PARTS&lt;/caption&gt;
  
      &lt;tr&gt;
          &lt;td&gt;
          &lt;label&gt;Frame Size:&lt;/label&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
          &lt;div class="Options"&gt;
          &lt;select&gt;
          &lt;option value="Please select"&gt;Please select&lt;/option&gt;
          &lt;option value="1"&gt;46cm 5'1" - 5'5"&lt;/option&gt;
          &lt;option value="2"&gt;49cm 5'3" - 5'8"&lt;/option&gt;
          &lt;option value="3"&gt;50cm 5'4" - 5'8"&lt;/option&gt;
          &lt;option value="4"&gt;54cm 5'8" - 5'11"&lt;/option&gt;
          &lt;option value="5"&gt;58cm 5'10" - 6'2"&lt;/option&gt;
          &lt;option value="6"&gt;59cm 5'11" - 6'2"&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;
          &lt;/td&gt;   
      &lt;/tr&gt;
  
  
      &lt;tr&gt;
          &lt;td&gt;
          &lt;label&gt;Battery Size:&lt;/label&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
          &lt;div class="Options"&gt;
          &lt;select&gt;
          &lt;option value="Please select"&gt;Please select&lt;/option&gt;
          &lt;option value="1"&gt;Large battery&lt;/option&gt;
          &lt;option value="2"&gt;Medium battery&lt;/option&gt;
          &lt;option value="3"&gt;Large battery&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;
          &lt;label&gt;Speed Type:&lt;/label&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
          &lt;div class="Options"&gt;
          &lt;select&gt;
          &lt;option value="Please select"&gt;Please select&lt;/option&gt;
          &lt;option value="1"&gt;Fix Cog&lt;/option&gt;
          &lt;option value="2"&gt;Changable Cog&lt;/option&gt;
          &lt;option value="3"&gt;Freewheel&lt;/option&gt;
          &lt;option value="3"&gt;8-Speed&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;    
          &lt;label&gt;Seats Size:&lt;/label&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
          &lt;div class="Options"&gt;   
          &lt;select&gt;
          &lt;option value="Please select"&gt;Please select&lt;/option&gt;
          &lt;option value="1"&gt;Small&lt;/option&gt;
          &lt;option value="2"&gt;Medium&lt;/option&gt;
          &lt;option value="3"&gt;Large&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;
          &lt;/td&gt;
  
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;
          &lt;label&gt;Rear Break:&lt;/label&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
          &lt;div class="Options"&gt;
          &lt;select&gt;
          &lt;option value="Please select"&gt;Please select&lt;/option&gt;
          &lt;option value="1"&gt;Yes&lt;/option&gt;
          &lt;option value="2"&gt;No&lt;/option&gt;
  
          &lt;/select&gt;
          &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
  
      &lt;tr&gt;
          &lt;td&gt;
          &lt;label&gt;Rim type:&lt;/label&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
          &lt;div class="Options"&gt;
          &lt;select&gt;
          &lt;option value="Please select"&gt;Please select&lt;/option&gt;
          &lt;option value="1"&gt;Standard&lt;/option&gt;
          &lt;option value="2"&gt;Sport&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
  &lt;/table&gt;    
  
  
  &lt;table class="colours"&gt;
      &lt;caption&gt;CHOOSE YOUR COLOURS&lt;/caption&gt;
  
      &lt;tr&gt;
          &lt;td&gt;
          &lt;label&gt;Frame:&lt;/label&gt;
          &lt;/td&gt;
  
          &lt;td&gt;
          &lt;div class="Options"&gt;
          &lt;select&gt;
          &lt;option value="Please select"&gt;Please select&lt;/option&gt;
          &lt;option value="1"&gt;46cm 5'1" - 5'5"&lt;/option&gt;
          &lt;option value="2"&gt;49cm 5'3" - 5'8"&lt;/option&gt;
          &lt;option value="3"&gt;50cm 5'4" - 5'8"&lt;/option&gt;
          &lt;option value="4"&gt;54cm 5'8" - 5'11"&lt;/option&gt;
          &lt;option value="5"&gt;58cm 5'10" - 6'2"&lt;/option&gt;
          &lt;option value="6"&gt;59cm 5'11" - 6'2"&lt;/option&gt;
          &lt;/select&gt;
          &lt;/div&gt;
          &lt;/td&gt;   
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>  </p>
  
  <p>But it turned out like this<img src="https://i.stack.imgur.com/f4dlP.jpg" alt="enter image description here"></p>
  
  <p>my CSS code:</p>
  
  <pre><code>.parts {
      font-family: arial;
      font-size: 20px;
      margin-left: 20px;
      width: 33.3%;
      margin-bottom: 15px;
      height: auto;
  }
  
  .parts caption {
      margin-top: 10px;
      font-family: arial;
      font-size: 30px;
      font-weight: bold;
      border: 2px solid black;
      padding-left: 4px;
      text-align: center;
  }
  
  
  .Options select {
      font-size: 15px;
      border-color:#999;
      float: left;
      width: 200px;
  
  }    
  
  .colours {
      font-family: arial;
      font-size: 20px;
      margin-left: 36%;
      position: relative;
      margin-top: 0px;
  
  }
  </code></pre>