title: Text appearing outside Bootstrap 3 well
body: <p>I am dynamically creating a Bootstrap well in which some entered text should be displayed using JavaScript and CSS/HTML. My code is given below:</p>
  
  <pre><code>$("#addqueuebutton").click(function(){
  
      var queue = '&lt;div class="well queue-well"&gt;';
      queue += '&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/a&gt;&lt;/span&gt;';
      queue += '&lt;div class="inline"&gt;&lt;h3&gt;&amp;nbsp ' + $('#queuename').val() + '&lt;/h3&gt;&lt;/div&gt;';
      queue += '&lt;/div&gt;';
      $('#queues').append(queue);
  });
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.queue-well{
      height: 30px;
  }
  </code></pre>
  
  <p>My problem is, the text I am entering (<code>$('#queuename').val()</code>) is appearing outside the well. I want it be present inside the well. I tried using <code>clearfix</code> in the <code>div class='well'</code> line, but it didn't work. Does anyone know how I could fix this? Thanks in advance!</p>