title: HTML inserted by JQuery results in different alignment from pure HTML
body: <p>Note: Please see the following comments by Brandson, it's the correct answer. </p>
  
  <p>I have a simple form which allows users to input several languages (english, french, spanish, etc) and their corresponding levels (like a recruitment website). Every language and its level is represented by the code below:</p>
  
  <pre><code>&lt;div class="form-inline" style="position: relative; left: 105px; padding-top: 20px;"&gt;
          &lt;label&gt;Language&amp;nbsp;&lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
          &lt;input type="text" name="languages[]" class="input-medium" style="margin-left: 16px;" value="french" readonly&gt;
          &lt;label style="padding-left: 107px; padding-right: 15px"&gt;Level&amp;nbsp;&lt;span&gt;*&lt;/span&gt;&lt;/label&gt;
          &lt;select&gt;
              &lt;option&gt;beginner&lt;/option&gt;
              &lt;option&gt;intermediate&lt;/option&gt;
              &lt;option&gt;fluent&lt;/option&gt;
              &lt;option&gt;bilingual&lt;/option&gt;
          &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The JQuery code is as below : </p>
  
  <pre><code> $("#language_add_btn").click(function () {
              $("#language_add_btn").before(createEmptyLanguagePart());
          });
  </code></pre>
  
  <p>If I use a jQuery method like <strong>before</strong> to add this snippet of code before a certain button, the result alignment is different from which if I put directly these HTML code before the button code. I used <strong>firefox webtools</strong> to check the source code and dom structure, but cannot figure out what is problem. Can anyone help me ? Many thanks !
  PS: As you may notice, I am using <strong>Tweeter Bootstrap</strong> HTML&amp;CSS framework.  </p>