Align 2 tables horizontally HTML

Question

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

<div id="tables">
    <table class="parts">
    <caption>CUSTOMISABLE PARTS</caption>

    <tr>
        <td>
        <label>Frame Size:</label>
        </td>

        <td>
        <div class="Options">
        <select>
        <option value="Please select">Please select</option>
        <option value="1">46cm 5'1" - 5'5"</option>
        <option value="2">49cm 5'3" - 5'8"</option>
        <option value="3">50cm 5'4" - 5'8"</option>
        <option value="4">54cm 5'8" - 5'11"</option>
        <option value="5">58cm 5'10" - 6'2"</option>
        <option value="6">59cm 5'11" - 6'2"</option>
        </select>
        </div>
        </td>   
    </tr>


    <tr>
        <td>
        <label>Battery Size:</label>
        </td>

        <td>
        <div class="Options">
        <select>
        <option value="Please select">Please select</option>
        <option value="1">Large battery</option>
        <option value="2">Medium battery</option>
        <option value="3">Large battery</option>
        </select>
        </div>
        </td>
    </tr>

    <tr>
        <td>
        <label>Speed Type:</label>
        </td>

        <td>
        <div class="Options">
        <select>
        <option value="Please select">Please select</option>
        <option value="1">Fix Cog</option>
        <option value="2">Changable Cog</option>
        <option value="3">Freewheel</option>
        <option value="3">8-Speed</option>
        </select>
        </div>
        </td>
    </tr>

    <tr>
        <td>    
        <label>Seats Size:</label>
        </td>

        <td>
        <div class="Options">   
        <select>
        <option value="Please select">Please select</option>
        <option value="1">Small</option>
        <option value="2">Medium</option>
        <option value="3">Large</option>
        </select>
        </div>
        </td>

    </tr>

    <tr>
        <td>
        <label>Rear Break:</label>
        </td>

        <td>
        <div class="Options">
        <select>
        <option value="Please select">Please select</option>
        <option value="1">Yes</option>
        <option value="2">No</option>

        </select>
        </div>
        </td>
    </tr>


    <tr>
        <td>
        <label>Rim type:</label>
        </td>

        <td>
        <div class="Options">
        <select>
        <option value="Please select">Please select</option>
        <option value="1">Standard</option>
        <option value="2">Sport</option>
        </select>
        </div>
        </td>
    </tr>

</table>    


<table class="colours">
    <caption>CHOOSE YOUR COLOURS</caption>

    <tr>
        <td>
        <label>Frame:</label>
        </td>

        <td>
        <div class="Options">
        <select>
        <option value="Please select">Please select</option>
        <option value="1">46cm 5'1" - 5'5"</option>
        <option value="2">49cm 5'3" - 5'8"</option>
        <option value="3">50cm 5'4" - 5'8"</option>
        <option value="4">54cm 5'8" - 5'11"</option>
        <option value="5">58cm 5'10" - 6'2"</option>
        <option value="6">59cm 5'11" - 6'2"</option>
        </select>
        </div>
        </td>   
    </tr>
</table>

But it turned out like this

my CSS 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;

}

Answer 1

You could use display: inline-table on the two child tables, as shown below.

You need to think about how best to deal with the table captions so get the styling that you want.

   .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: 20px; /* adjust as neeeded */
     position: relative; /* not needed */
     margin-top: 0px;
   }

#tables {
  border: 1px dotted blue; /* for demo only */
}
#tables table {
  display: inline-table;
  border: 1px dotted gray;
  vertical-align: top; /* you  need to decide how best to align the child tables */
}

<div id="tables">
  <table class="parts">
    <caption>CUSTOMISABLE PARTS</caption>

    <tr>
      <td>
        <label>Frame Size:</label>
      </td>

      <td>
        <div class="Options">
          <select>
            <option value="Please select">Please select</option>
            <option value="1">46cm 5'1" - 5'5"</option>
            <option value="2">49cm 5'3" - 5'8"</option>
            <option value="3">50cm 5'4" - 5'8"</option>
            <option value="4">54cm 5'8" - 5'11"</option>
            <option value="5">58cm 5'10" - 6'2"</option>
            <option value="6">59cm 5'11" - 6'2"</option>
          </select>
        </div>
      </td>
    </tr>


    <tr>
      <td>
        <label>Battery Size:</label>
      </td>

      <td>
        <div class="Options">
          <select>
            <option value="Please select">Please select</option>
            <option value="1">Large battery</option>
            <option value="2">Medium battery</option>
            <option value="3">Large battery</option>
          </select>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <label>Speed Type:</label>
      </td>

      <td>
        <div class="Options">
          <select>
            <option value="Please select">Please select</option>
            <option value="1">Fix Cog</option>
            <option value="2">Changable Cog</option>
            <option value="3">Freewheel</option>
            <option value="3">8-Speed</option>
          </select>
        </div>
      </td>
    </tr>

    <tr>
      <td>
        <label>Seats Size:</label>
      </td>

      <td>
        <div class="Options">
          <select>
            <option value="Please select">Please select</option>
            <option value="1">Small</option>
            <option value="2">Medium</option>
            <option value="3">Large</option>
          </select>
        </div>
      </td>

    </tr>

    <tr>
      <td>
        <label>Rear Break:</label>
      </td>

      <td>
        <div class="Options">
          <select>
            <option value="Please select">Please select</option>
            <option value="1">Yes</option>
            <option value="2">No</option>

          </select>
        </div>
      </td>
    </tr>


    <tr>
      <td>
        <label>Rim type:</label>
      </td>

      <td>
        <div class="Options">
          <select>
            <option value="Please select">Please select</option>
            <option value="1">Standard</option>
            <option value="2">Sport</option>
          </select>
        </div>
      </td>
    </tr>

  </table>


  <table class="colours">
    <caption>CHOOSE YOUR COLOURS</caption>

    <tr>
      <td>
        <label>Frame:</label>
      </td>

      <td>
        <div class="Options">
          <select>
            <option value="Please select">Please select</option>
            <option value="1">46cm 5'1" - 5'5"</option>
            <option value="2">49cm 5'3" - 5'8"</option>
            <option value="3">50cm 5'4" - 5'8"</option>
            <option value="4">54cm 5'8" - 5'11"</option>
            <option value="5">58cm 5'10" - 6'2"</option>
            <option value="6">59cm 5'11" - 6'2"</option>
          </select>
        </div>
      </td>
    </tr>
  </table>
</div>