title: how to change styling on the same line within a <div>
body: <p>I have a part of a web page (incorporating Bootstrap CSS) that contains a <code>&lt;div&gt;</code> with the id "drop-zone" that I pick up later in javascript to implement drag-and-drop functionality:</p>
  
  <pre><code>&lt;div id="drop_zone"&gt;
      &lt;p style="color: darkgray"&gt;Drop&lt;/p&gt;
      &lt;p style="color: black"&gt;test.txt&lt;/p&gt;
      &lt;p style="color: darkgray"&gt; here&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have the <code>&lt;p&gt;</code>s in there because I want to vary the styling across this single line, but if I use the code above, or if I swap the <code>&lt;p&gt;</code>s for <code>&lt;div&gt;</code>s, the code renders on multiple lines like so:</p>
  
  <blockquote>
    <p>Drop </p>
    
    <p><strong>test.txt</strong></p>
    
    <p>here</p>
  </blockquote>
  
  <p>when I really want it to look like:</p>
  
  <blockquote>
    <p>Drop <strong>test.txt</strong> here</p>
  </blockquote>
  
  <p>I'm sure this is an easy fix, but any thoughts here?</p>