I'm wondering why the paragraph stops being red after the div

<!DOCTYPE HTML>
<html>
<head>
    <link id="favicon" rel="icon" href="favicon.ico" type="image/x-icon">
    <title>Test Site</title>
    <style>
    p {
    color:red;
    }
    h1,h2,h3,h4,h5,h6 {
    color:silver;
    }
    #test #one {
    color:gray;
    }
    </style>
</head>

<body style="background-color:#07358D">
    <h1>Hello World</h1>
    <p style="display:inline;" contenteditable="True" id="test">
    This is a paragraph to demonstrate paragraphs. This is a paragraph to <div style="display:inline;" id="one">demonstrate</div id="one"> paragraphs. This is a paragraph to demonstrate paragraphs. This is a paragraph to demonstrate paragraphs. This is a paragraph to demonstrate paragraphs. This is a paragraph to demonstrate paragraphs. This is a paragraph to demonstrate paragraphs. This is a paragraph to demonstrate paragraphs. This is a paragraph to demonstrate paragraphs. This is a paragraph to demonstrate paragraphs. This is a paragraph to demonstrate paragraphs. This is a paragraph to demonstrate paragraphs. This is a paragraph to demonstrate paragraphs. This is a paragraph to demonstrate paragraphs. This is a paragraph to demonstrate paragraphs. This is a paragraph to demonstrate paragraphs.
    </p>
</body>
</html>

After the div the paragraph stops being red and I don't know why. I'm also wondering why there is a larger space between the line with the div and the next line.