title: When I replace a div with another div everything else is ruined
body: <p>I am trying to make a form where when it is submitted the input section is removed and the results are shown below. When I do it on a laptop if works fine and the rest of the page is in the same position as before it was submitted, but when I try to make it responsive and do it on mobile, when it is submitted everything else is moved and it looks different.</p>
  <p><a href="https://i.stack.imgur.com/nkLtN.png" rel="nofollow noreferrer">Before the form is submitted</a></p>
  <p><a href="https://i.stack.imgur.com/1MVw5.png" rel="nofollow noreferrer">After submitted</a></p>
  <p>Can anyone help?
  Thanks</p>
  <p>This is the code:</p>
  <pre><code>function showResults() {
      document.getElementById(&quot;input1&quot;).style.display=&quot;none&quot;;
      document.getElementById(&quot;input2&quot;).style.display=&quot;none&quot;;
      document.getElementById(&quot;input3&quot;).style.display=&quot;none&quot;;
      document.getElementById(&quot;input4&quot;).style.display=&quot;none&quot;;
      document.getElementById(&quot;input5&quot;).style.display=&quot;none&quot;;
      document.getElementById(&quot;input6&quot;).style.display=&quot;none&quot;;
      document.getElementById('hideButton').style.display = &quot;none&quot;;
      document.getElementById(&quot;resultsSection&quot;).style.display=&quot;block&quot;;
      }
  </code></pre>