title: split div into 2 columns
body: <p>I'm trying to split a div into 2 columns. I tried to find the answer in another question but i still don't get it.
  I succeeded to split the div into 2 columns but now the content of the div is very far from each other (and i want them to be close).
  here is my html:</p>
  
  <pre><code>&lt;div id="connect_us" class="container"&gt;
  &lt;h1&gt;תאמו איתנו פגישה עוד היום&lt;/h1&gt;
  &lt;div id="right"&gt;
  &lt;form action="connect"&gt;
      &lt;input type="text" name="name" value="שם"&gt;&lt;P&gt;
      &lt;input type="text" name="company" value="שם חברה" onclick="clear()"&gt;&lt;P&gt;
      &lt;input type="text" name="phone" value="טלפון" onclick="clear()"&gt;&lt;P&gt;
      &lt;input type="text" name="mail" value="דואר אלקטרוני" onclick="clear()"&gt;&lt;P&gt;
      &lt;input type="text" name="message" value="הודעה" onclick="clear()"&gt;&lt;P&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="left"&gt;
  &lt;input type="text" name="company" value="kt zufr" onclick="clear()"&gt;&lt;P&gt;
  &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>here is my css:</p>
  
  <pre><code>#connect_us{
  text-align: center;
  font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
  color:gray;
  overflow:auto; 
  width: 100%; 
  
  }
  #left, #right { 
    width: 45%; 
    margin:5px; 
    padding: 1em; 
  
     } 
  
  #left  { float:left;  }
  #right { float:right; } 
  </code></pre>
  
  <p>what i am trying to do is like this(as u can see the 2 colums are close):<img src="https://i.stack.imgur.com/y5S7p.png" alt="example"></p>