title: How to display two forms next to each other
body: <p>I am not very strong with css but what I have is 2 forms below:</p>
  
  <pre><code>    //below is where it displays course name
  
          $outputcourse = ""; 
          $outputcourse .= "&lt;p&gt;&lt;strong&gt;Course:&lt;/strong&gt; " . $course .  " - "  . $coursename . "&lt;/p&gt;";
  
      //below is where it displays module name
  
      $outputmodule = ""; 
      $outputmodule = sprintf("&lt;p&gt;&lt;strong&gt;Module:&lt;/strong&gt; %s - %s&lt;/p&gt;", $moduleId, $moduleName);
  
      //below is form where it displays assessments drop down menu
  
          $assessmentform = "&lt;form action='".htmlentities($_SERVER['PHP_SELF'])."' method='post'&gt;
  &lt;p&gt;{$outputcourse}&lt;/p&gt;
  &lt;p&gt;{$outputmodule}&lt;/p&gt;
          &lt;p&gt;&lt;strong&gt;Assessments:&lt;/strong&gt; {$sessionHTML} &lt;/p&gt;   
          &lt;/form&gt;";
  
          echo $assessmentform;
  
          }
  
          //below is form where it displays all of the text inputs and submit button
  
          $editsession = "&lt;form id='updateForm'&gt;
  
              &lt;p&gt;&lt;strong&gt;Current Assessment's Date/Start Time:&lt;/strong&gt;&lt;/p&gt;
              &lt;table&gt;
              &lt;tr&gt;
              &lt;th&gt;Assessment:&lt;/th&gt;
              &lt;td&gt;&lt;input type='text' id='currentAssessment' name='Assessmentcurrent' readonly='readonly' value='' /&gt; &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;th&gt;Date:&lt;/th&gt;
              &lt;td&gt;&lt;input type='text' id='currentDate' name='Datecurrent' readonly='readonly' value='' /&gt; &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;th&gt;Start Time:&lt;/th&gt;
              &lt;td&gt;&lt;input type='text' id='currentTime' name='Timecurrent' readonly='readonly' value=''/&gt; &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
              &lt;div id='currentAlert'&gt;&lt;/div&gt;
  
              &lt;p&gt;&lt;strong&gt;New Assessment's Date/Start Time:&lt;/strong&gt;&lt;/p&gt;
              &lt;table&gt;
              &lt;tr&gt;
              &lt;th&gt;Assessment:&lt;/th&gt;
              &lt;td&gt;&lt;input type='text' id='newAssessment' name='Assessmentnew' readonly='readonly' value='' /&gt; &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;th&gt;Date:&lt;/th&gt; 
              &lt;td&gt;&lt;input type='text' id='newDate' name='Datenew' readonly='readonly' value='' /&gt; &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
              &lt;th&gt;Start Time:&lt;/th&gt; 
              &lt;td&gt;&lt;input type='text' id='newTime' name='Timenew' readonly='readonly' value=''/&gt;&lt;span class='timepicker_button_trigger'&gt;&lt;img src='Images/clock.gif' alt='Choose Time' /&gt;&lt;/span&gt; &lt;/td&gt;
              &lt;/tr&gt;
              &lt;/table&gt;
              &lt;div id='datetimeAlert'&gt;&lt;/div&gt;
  
              &lt;/form&gt;
  
              &lt;p&gt;&lt;button id='updateSubmit'&gt;Update Date/Start Time&lt;/button&gt;&lt;/p&gt;
  
              &lt;div id='targetdiv'&gt;&lt;/div&gt;
          ";
  
          echo $editsession;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>form#assessmentForm {
   float: left; 
   border: 1px solid red;
  }
  form#updateForm {
   float:left;
   clear: right;
   /* with some space to the left of the second form */
   margin-right: 100px; 
  }
  p#submitupdatebtn {
    clear: both;
  }
  </code></pre>
  
  <p>At the moment both form are displayed above one another. What I really want to do is display <code>$editsession</code> form to be displayed next to the <code>$assessmentform</code> form on the right hand side with a little space in between the two forms.</p>
  
  <p>How can this be achieved? And I want this to work in all Major browsers.</p>
  
  <p>Below shows two screenshots merged together to show how I want it to be displayed:</p>
  
  <p><img src="https://i.stack.imgur.com/BkAfm.png" alt="enter image description here"></p>
  
  <p>Thanks</p>
  
  <p>UPDATE:</p>
  
  <p>Below is now what it is displaying:</p>
  
  <p><img src="https://i.stack.imgur.com/RFIVg.png" alt="enter image description here"></p>