title: horizontal alignment <input> and <table>
body: <p>I have following code with some input fields and a calculator. Want to align them horizontal on my website, on the mobile version they sould be aligned vertical. I attached some images for illustration.</p>
  <p>The problem is maybe, that there is more then one table and in combination with input fields. I tried a lot of edits in the code, but can not solve it. So I attached the initial code, which I tried to modify.
  I am beginner and really appreciate your support!</p>
  <p><a href="https://i.stack.imgur.com/bTRJH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bTRJH.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/LTKmP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LTKmP.png" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html class="no-js" lang="zxx"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
          &lt;title&gt;rechner&lt;/title&gt;
  
  
  
  
  &lt;title&gt;rechner&lt;/title&gt;
  
  
  &lt;script language="JavaScript" type="text/javascript"&gt;
  some js
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;img src="images/calc.png"&gt;
  &lt;body&gt;
  &lt;div style="margin-left: 50px;"&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;h3&gt;   abc&lt;/h3&gt;
  
  &lt;div align="left"&gt;
  &lt;div id="calclpayment"&gt;
          &lt;form&gt;
          &lt;strong&gt;
            &lt;br /&gt;
     Bitte folgende Felder ergänzen:&lt;/strong&gt; &lt;br /&gt;
  &lt;br /&gt;
  &lt;table width="100%" align="left"&gt;
            &lt;td width="50"&gt;&lt;div align="left"&gt;   def/Monat&lt;/div&gt;&lt;/td&gt;
                &lt;td width="40"&gt;&lt;input type= "text" size="6" name="def"  /&gt;&lt;/td&gt;
        &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;&lt;div align="left"&gt;   Anzahl defe&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" size="6" name="defe" /&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td width="40"&gt;&lt;/td&gt;
        &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td height="24"&gt;&lt;div align="left"&gt;   + Lohnbuchhaltung:&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div align="left"&gt;
            &lt;select name="lbh"&gt;
              &lt;option value=1&gt;Ja&lt;/option&gt;
              &lt;option value=0&gt;Nein&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;&lt;/td&gt;
        &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td height="24"&gt;&lt;div align="left"&gt;   + defeer/MwSt:&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div align="left"&gt;
            &lt;select name="steuer"&gt;
              &lt;option value=1&gt;Ja&lt;/option&gt;
              &lt;option value=0&gt;Nein&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;&lt;/td&gt;
        &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td height="24"&gt;&lt;div align="left"&gt;   + eingeschränkte defeere&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div align="left"&gt;
            &lt;select name="rev"&gt;
              &lt;option value=1&gt;Ja&lt;/option&gt;
              &lt;option value=0&gt;Nein&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;&lt;/td&gt;
        &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td height="24"&gt;&lt;div align="left"&gt;   + Jahresabschluss&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div align="left"&gt;
            &lt;select name="jr"&gt;
              &lt;option value=1&gt;Ja&lt;/option&gt;
              &lt;option value=0&gt;Nein&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;&lt;/td&gt;
        &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td&gt;&lt;input name="Input" type="button" value="Preis berechnen" onclick="calcpayments()"/&gt;&lt;/td&gt;
        &lt;/tr&gt;
            &lt;/table&gt;
     &lt;br /&gt;
    &lt;b&gt;  text718:&lt;/b&gt;  &lt;br /&gt;
    &lt;br /&gt;
  
    &lt;div id="monthlypayment" style="font-size: 25px;background-color:#1b365d;
  font-weight: bold; width: 150px; padding: 5px; color:#FFF;" &gt; 0  &lt;/div&gt;
        &lt;/form&gt;
  
    &lt;/div&gt;
            &lt;br /&gt;
            &lt;br /&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;h3&gt;&lt;p style="text-align:center"&gt;Für deine Berechnungen zu Diensten!&lt;/p&gt;&lt;/h3&gt;
  
                        &lt;!-- Calculator Start Here --&gt;
            &lt;head&gt;
       &lt;script&gt;
       some js
       &lt;/script&gt;
       &lt;!-- for styling --&gt;
       &lt;style&gt;
  
      .spec  .title{
          margin-bottom: 10px;
          text-align:center;
          width: 210px;
          color:#1b365d;
          }
  
      .spec    input[type="button"]
          {
          background-color:#1b365d;
          color: white;
          border: solid black 2px;
          width:100%
          }
  
      .spec     input[type="text"]
          {
          background-color:white;
          border: solid black 2px;
          text-align:right;
          width:100%;
          height:45px
          }
    .spec      .center {
          margin-left: auto;
          margin-right: auto;
          }
        }
       &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;!-- create table --&gt;
  
    &lt;body&gt;
  &lt;div class = "spec" &gt;
       &lt;div class = title &gt;&lt;/div&gt;
       &lt;table border="1" class="center"&gt;
          &lt;tr&gt;
             &lt;td colspan="3"&gt;&lt;input type="text" id="result"/&gt;&lt;/td&gt;
             &lt;!-- clr() function will call clr to clear all value --&gt;
             &lt;td&gt;&lt;input type="button" value="c" onclick="clr()"/&gt;&lt;/td&gt;
         &lt;/tr&gt;
          &lt;tr&gt;
             &lt;!-- create button and assign value to each button --&gt;
             &lt;!-- dis("1") will call function dis to display value --&gt;
             &lt;td&gt;&lt;input type="button" value="1" onclick="dis('1')"/&gt; &lt;/td&gt;
             &lt;td&gt;&lt;input type="button" value="2" onclick="dis('2')"/&gt; &lt;/td&gt;
             &lt;td&gt;&lt;input type="button" value="3" onclick="dis('3')"/&gt; &lt;/td&gt;
             &lt;td&gt;&lt;input type="button" value="/" onclick="dis('/')"/&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;td&gt;&lt;input type="button" value="4" onclick="dis('4')"/&gt; &lt;/td&gt;
             &lt;td&gt;&lt;input type="button" value="5" onclick="dis('5')"/&gt; &lt;/td&gt;
             &lt;td&gt;&lt;input type="button" value="6" onclick="dis('6')"/&gt; &lt;/td&gt;
             &lt;td&gt;&lt;input type="button" value="-" onclick="dis('-')"/&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;td&gt;&lt;input type="button" value="7" onclick="dis('7')"/&gt; &lt;/td&gt;
             &lt;td&gt;&lt;input type="button" value="8" onclick="dis('8')"/&gt; &lt;/td&gt;
             &lt;td&gt;&lt;input type="button" value="9" onclick="dis('9')"/&gt; &lt;/td&gt;
             &lt;td&gt;&lt;input type="button" value="+" onclick="dis('+')"/&gt; &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
             &lt;td&gt;&lt;input type="button" value="." onclick="dis('.')"/&gt; &lt;/td&gt;
             &lt;td&gt;&lt;input type="button" value="0" onclick="dis('0')"/&gt; &lt;/td&gt;
             &lt;!-- solve function call function solve to evaluate value --&gt;
             &lt;td&gt;&lt;input type="button" value="=" onclick="solve()"/&gt; &lt;/td&gt;
             &lt;td&gt;&lt;input type="button" value="x" onclick="dis('*')"/&gt; &lt;/td&gt;
          &lt;/tr&gt;
  
       &lt;/table&gt;
  &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;p&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>