title: Why are my CSS elements spacing out by themselves?
body: <p>Im working on a project, but my elements are very spaced out and I'm not the best at CSS. I don't know if it's doing it on it's own or something is wrong with my CSS. Can you please help find the problem?</p>
  <pre><code>  &lt;body&gt;
      &lt;div class='top'&gt;
        &lt;div class='top-left'&gt;
          &lt;input type='text' class='info' id='totalBill' placeholder='Total bill'&gt;
          &lt;input type='text' class='info' id='peopleAmount' placeholder='People'&gt;
        &lt;/div&gt;
        &lt;div class='top-right'&gt;
          &lt;div class='tip'&gt;
            &lt;input type='text' class='info' id='tip' placeholder='Tip (in percent)'&gt;
          &lt;/div&gt;
          &lt;button onclick = &quot;calculate()&quot;&gt; Calculate &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;bottom&quot;&gt;
        &lt;input id=&quot;output&quot; disabled&gt;
        &lt;input id=&quot;moneyOutput&quot; disabled&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>CSS File Link - <a href="https://aaryank.codewizardshq.com/BillSplitter/style.css" rel="nofollow noreferrer">https://aaryank.codewizardshq.com/BillSplitter/style.css</a></p>