Html Table Container

Html Table Container


Hello I have 2 tables in HTML, I want to know how do I put one beside the other, I have the following code



//CONDICIONES AMBIENTALES
    if (CondicionesAmbientalesNoVacio  !=  null)
    {
        output = output + "<div class='invHead2'>Condiciones Ambientales</div>";
        output = output + "<table class='tableSize2' border='1' cellspacing='0' style='border-color:#EEE;margin-bottom:5px;'>";
        output = output + "<tr class='rowHead'><td>Zona</td><td>Hora</td><td>HR</td><td>TA(°C)</td><td>TS(°C)</td><td>TD(°C)</td><td>TS(°C)-TD(°C)</td></tr>";
        for each x in CondicionesAmbientalesFetch
        {
            CondicionesAmbientales  =  Sub_Condiciones_Ambientales  [ID = x.ID];
            output = output + "<tr class='rowVal'><td style='text-align:left'>" + CondicionesAmbientales.Zona + "</td><td style='text-align:center'>" + CondicionesAmbientales.Hora_Lectura + "</td><td style='text-align:center'>" + CondicionesAmbientales.HR + "</td><td style='text-align:center'>" + CondicionesAmbientales.TA_C + "</td><td style='text-align:center'>" + CondicionesAmbientales.TS_C + "</td><td style='text-align:center'>" + CondicionesAmbientales.TD_C + "</td><td style='text-align:center'>" + CondicionesAmbientales.TS_C_TD_C + "</td></tr>";
        }
output = output + "</table>";
    }
//AFECTACION LLUVIA
   output = output + "<div class='invHead2' style='width:20%;'>Afectación Lluvia</div>";
        output = output + "<table class='tableSize3' border='1' cellspacing='0' style='border-color:#EEE;margin-bottom:5px;'>";
        output = output + "<tr class='rowHead'><td>Hoy (Hr)</td><td>Acumulado Proyecto (Hr)</td></tr>";
output = output + "<tr class='rowVal'><td style='text-align:center'>" + ifnull(LluviaHoy,0.0) + "</td><td style='text-align:center'>" + ifnull(LluviaAcum,0.0) + "</td></tr>";


CSS

    .tableSize2{
          width: 60%;
          margin: 0px auto;
          margin-top: 0px;
  }
      .tableSize3{
          width: 20%;
          margin: 0px auto;
          margin-top: 0px;
  }

  }
  .invHead2{
          text-align: center;
   width: 60%;
   margin: 0px auto;
                  background-color: #B1B1B1;
                  padding: 0px 0px 0px 0px;
                  font-size: 12px;
                  font-weight: bold;
                  color: #000;
                  text-shadow: 0px 0px 2px #E7E7E7;
  }
  .rowHead{
  color: #000;
  font-size: 10px;
  font-weight: bold;
  color: #000;
  text-align: center;
  height: 20px;
  background-color: #D5D5D5;
  }
  .rowVal{
  color: #000;
font-family: Arial;
  font-size: 10px;
  text-align: left;
  height: 20px;
  }