I have 2 tables beside each other Tested within the element of one bigger tableI have to align the columns elements of these 2 tables to display in a single line . . I havent been able to achieve it with valign or vertical-align . . Please help
\[code\]<style type="text/css"> .FieldLabel { padding: 2px; width: 180px; } .Head { text-align: left; font-weight: bold; font-size: 20px; } .auto-style1 { width: 420px; vertical-align: top; } .auto-style2 { width: 420px; vertical-align: inherit; }</style><div id="TXN_SAMPLES_createForm1"><table><tr> <td colspan="2" class="Head">Request Details </td></tr><tr> <td style="width: 500px"><table> <tr> <td class="FieldLabel">Lead Src Code </td> <td> <div class="FieldPlaceholder DataOnly"> {Lead_Lead_Source_CODE} </div> </td> </tr> <tr> <td class="FieldLabel">Request Date </td> <td> <div class="FieldPlaceholder DataOnly"> {REQUEST_DATE} </div> </td> </tr> <tr> <td class="FieldLabel">Customer </td> <td> <div class="FieldPlaceholder DataOnly"> {CUST_NAME} </div> </td> </tr> <tr> <td class="FieldLabel">Product </td> <td> <div class="FieldPlaceholder DataOnly"> {PROD_NAME} </div> </td> </tr> <tr> <td class="FieldLabel">DG/Non-DG </td> <td> <div class="FieldPlaceholder DataOnly"> {DG_NONDG} </div> </td> </tr></table></td><td class="auto-style2"><table> <tr> <td class="FieldLabel">. </td> <td> <div class="FieldPlaceholder DataOnly"> </div> </td> </tr> <tr> <td class="FieldLabel">. </td> <td> <div class="FieldPlaceholder DataOnly"> </div> </td> </tr> <tr> <td class="FieldLabel">Country </td> <td> <div class="FieldPlaceholder DataOnly"> {COUNTRY} </div> </td> </tr> <tr> <td class="FieldLabel">Division </td> <td> <div class="FieldPlaceholder DataOnly"> {DIVISION} </div> </td> </tr> <tr> <td class="FieldLabel"></td> <td> <div class="FieldPlaceholder DataOnly"> </div> </td> </tr></table></td><td style="width: auto"><table style="float: right"> <tr> <td class="FieldLabel"></td> <td> <div class="FieldPlaceholder DataOnly"> </div> </td> </tr> <tr> <td class="FieldLabel"></td> <td> <div class="FieldPlaceholder DataOnly"> </div> </td> </tr> <tr> <td class="FieldLabel"></td> <td> <div class="FieldPlaceholder DataOnly"> </div> </td> </tr> <tr> <td class="FieldLabel">Quantity (Kg) </td> <td> <div class="FieldPlaceholder DataOnly"> {QTY} </div> </td> </tr> </table> </td> </tr> <tr> <td colspan="2" class="Head">Sample Details </td> </tr><tr><td style="width: 500px"><table><tr> <td class="FieldLabel">Dispatch Date </td> <td> <div class="FieldPlaceholder DataOnly"> {DISPATCH_DATE} </div> </td></tr><tr> <td class="FieldLabel">Lot No. </td> <td> <div class="FieldPlaceholder DataOnly"> {LOT_NO} </div> </td></tr> <tr> <td class="FieldLabel">AWB No. </td> <td> <div class="FieldPlaceholder DataOnly"> {AWB_NO} </div> </td> </tr> <tr> <td class="FieldLabel">Dispatch Mode </td> <td> <div class="FieldPlaceholder DataOnly"> {DISPATCH_MODE} </div> </td> </tr> <tr> <td class="FieldLabel">Freight (THB) </td> <td> <div class="FieldPlaceholder DataOnly"> {FREIGHT} </div> </td> </tr> <tr> <td class="FieldLabel">Additional Cost </td> <td> <div class="FieldPlaceholder DataOnly"> {ADDITIONAL_COST} </div> </td> </tr> <tr> <td class="FieldLabel">Receipt Conformation </td> <td> <div class="FieldPlaceholder DataOnly"> {RECEIPT_CONFORMATION} </div> </td> </tr> <tr> <td class="FieldLabel">Reason for Delay </td> <td> <div class="FieldPlaceholder DataOnly"> {REMARK} </div> </td></tr> </table> </td><td class="auto-style1"><table> <tr> <td class="FieldLabel">Shipment Date </td> <td> <div class="FieldPlaceholder DataOnly"> {SHIPMENT_DATE} </div> </td> </tr> <tr> <td class="FieldLabel">Packing </td> <td> <div class="FieldPlaceholder DataOnly"> {PACKING} </div> </td></tr><tr> <td class="FieldLabel">Process Time (days) </td> <td> <div class="FieldPlaceholder DataOnly"> {Process_Time} </div> </td></tr><tr> <td class="FieldLabel">Courier Service </td> <td> <div class="FieldPlaceholder DataOnly"> {COURIER} </div> </td></tr><tr> <td class="FieldLabel">Weight Charged </td> <td> <div class="FieldPlaceholder DataOnly"> {WEIGHT_CHARGEDBY_COURIER} </div> </td></tr><tr> <td class="FieldLabel">Lead Id </td> <td> <div class="FieldPlaceholder DataOnly"> {Lead_Id} </div> </td></tr> </table> </td></tr> </table></div>\[/code\]