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

Question

I have a part of a web page (incorporating Bootstrap CSS) that contains a <div> with the id "drop-zone" that I pick up later in javascript to 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 the <p>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 <p>s for <div>s, the code renders on multiple lines like so:

Drop

test.txt

here

when I really want it to look like:

Drop test.txt here

I'm sure this is an easy fix, but any thoughts here?

Answer 1

Use <span> instead of <p>.

Answer 2

<p> and <div> are both block elements which will be display their contents on a separate line by default. You'd be better off using a <span> which will display its contents inline.

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

You should really consider moving all the styles into a stylesheet, too, instead of having them defined in style attributes like you have as this will make changing the styles easier as your page gets more complex.