title: Strange Legend Layout on Fieldset
body: <p>Why does the legend 'Description' appear <em>below</em> the border of the second fieldset?</p>
  
  <p>Both fieldsets seem symmetrical to me (for now).</p>
  
  <p><img src="https://i.stack.imgur.com/oXwIM.png" alt="enter image description here"></p>
  
  <p>EDIT: javascript code and jsfiddle link</p>
  
  <pre><code>NounEditor = function() {
  var nc = {}; //private members
  nc.DIV = $('&lt;form/&gt;');
  
  var nameFieldSet = $('&lt;fieldset/&gt;').appendTo(nc.DIV);
  nameFieldSet.append($('&lt;legend/&gt;', {text: 'Name'}));
  
  for(var i=0; i&lt;2; i++){
      var nameDiv = $('&lt;div/&gt;', {text: "lang" + i })
      .append($('&lt;input/&gt;', {
          style: 'display: inline-block'}));
      nameFieldSet.append(nameDiv);
  }
  nc.DIV.append($('&lt;p/&gt;'));
  var descFieldSet=$('&lt;fieldset/&gt;').appendTo(nc.DIV);
  descFieldSet.append($('&lt;lengend/&gt;', {text: 'Description'}));
  for(var i=0; i&lt;2; i++){
      var descDiv = $('&lt;div/&gt;', {text: "lang" + i })
      .append($('&lt;input/&gt;', {
          style: 'display: inline-block'}));
      descFieldSet.append(descDiv);
  }
  
  nc.DLG = nc.DIV.dialog({
      title: 'noun editor',
      modal: false, autoOpen: false,
      close: function() {
          $(this).remove();
      }
  });
  
  this.show=function(){
      nc.DLG.dialog('open');
  }
  
  } // class NounEditor
  
  var dlg = new NounEditor();
  dlg.show();
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Y7tJ9/" rel="nofollow noreferrer">jsfiddle link</a></p>