Background color of the parent block is not

Question

In the code below I have two block elements: p and div. I have two background colors for both the blocks. Why am I not getting the green background for the whole "p" element?

*{
  margin:0;
}

p{
  background-color:green;
}

.test{
  background-color:yellow;
  height:10px;
}

<p>hello there
<div class="test">
  
</div>
How are you?
</p>