html - how to change styling on the same line within a <div> -

i have part of web page (incorporating bootstrap css) contains <div> id "drop-zone" pick later in javascript implement drag-and-drop functionality:

<div id="drop_zone">     <p style="color: darkgray">drop</p>     <p style="color: black">test.txt</p>     <p style="color: darkgray"> here</p> </div> 

i have <p>s in there because want vary styling across single line, if use code above, or if swap <p>s <div>s, code renders on multiple lines so:

drop

test.txt

here

when want like:

drop test.txt here

i'm sure easy fix, thoughts here?

use <span> instead of <p>.