title: jQuery element.before() inserts incorrectly formatted element
body: <p>Building a simple todo list (because we need another one of those).  Using the jQuery.before() to insert a new item before a blank <em>li</em> at the end.  The jQuery is below:  </p>
  
  <pre><code>$('#blankLine').before('&lt;li class="item"&gt;' +
      '&lt;div class="todo-item"&gt;' +
          '&lt;input type="checkbox"&gt;' +
          '&lt;p contenteditable="true"&gt;' +
              '&lt;span&gt;a&lt;/span&gt;' +
              'Walk the cat' +
              '&lt;span&gt;a&lt;/span&gt;' +
          '&lt;/p&gt;' 
      '&lt;/div&gt;' +
      '&lt;div class="mover"&gt;' +
          '&lt;i class="fa fa-bars" aria-hidden="true"&gt;&lt;/i&gt;' +
      '&lt;/div&gt;' +
  '&lt;/li&gt;');
  </code></pre>
  
  <p>The HTML:  </p>
  
  <pre><code>&lt;li class="item"&gt;
      &lt;div class="todo-item"&gt;
          &lt;input type="checkbox"&gt;
          &lt;p contenteditable="true"&gt;
              &lt;span&gt;a&lt;/span&gt;
              Walk the cat
              &lt;span&gt;a&lt;/span&gt;
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="mover"&gt;
          &lt;i class="fa fa-bars" aria-hidden="true"&gt;&lt;/i&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li id="blankLine"&gt;&lt;/li&gt;
  </code></pre>
  
  <p>The relevant SCSS:</p>
  
  <pre><code>li {
      border-bottom: 1px solid #29AADD;
      height: 1.75em;
      padding-bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
  
      .todo-item {
          width: 50%;
      }
  
      input {
          margin: 1px 4px 2px 10px;
      }
      p {
          margin: 0;
          margin-left: 12px;
          display: inline;
          height: 1em;
          padding-right: 2px;
          padding-left: 2px;
          width: 100%;
  
          //Bug in Firefox would insert a pair of &lt;br&gt; tags on the inside of 
          //&lt;p contenteditable="true"&gt; *** &lt;/p&gt; just before the closing p tag
          br {
              display: none;
          }
      }
      span {
          padding: 0;
          margin: 0;
          color: #FDFD77;
      }
      .mover {
          margin-right: 3%;
          cursor: pointer;
      }
      i {
          padding: 0;
          margin: 0 !important;
      }
      &amp;.new-item p{
          color: lighten($primary-text, 20%);
      }
  
      input[type=checkbox]:checked ~ p {
          text-decoration: line-through;
          color: lighten($primary-text, 10%);
      }
  }
  </code></pre>
  
  <p>The jQuery adds the new element, but the <em>p</em> tag has a smaller width and appears closer to the checkbox.  I have dug into the developer tools and the computed CSS is the same for the hardcoded <em>li</em> item and all it's descendants as the inserted <em>li</em> item and it's descendants.</p>
  
  <p>Why is this doing this, and what can I do to fix it?
  (The link to the codepen: <a href="http://codepen.io/SethHerning/pen/851735ca813ac08a73f8c86d322421d3" rel="nofollow">http://codepen.io/SethHerning/pen/851735ca813ac08a73f8c86d322421d3</a>)</p>