Replace high-level <p> tags with <div>

[fedarko]

One weird thing I noticed in the side panel HTML is that there are hidden <p> tags that take up some space at the bottom of the sample / feature metadata coloring panels:

While trying to figure out the cause of this I ran the side panel HTML through prettier (currently prettier just works on the JS/CSS, but it supports HTML). prettier gave the following error:

[error] empress/support_files/templates/side-panel.html: SyntaxError: Unexpected closing tag "p". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (62:3)
[error]   60 |       </p>
[error]   61 |     </div>
[error] > 62 |   </p>
[error]      |   ^
[error]   63 | </div>
[error]   64 | 
[error]   65 | <!-- Feature Metadata Coloring Options -->

It looks like the reason for this (prettier/prettier#5833) is that putting other <p> tags, or <div> tags, inside of <p> is not allowed per the HTML spec. I suspect this is causing small formatting problems in some browsers, likely including the one I mentioned earlier. (Even if not, we should try to have valid HTML.)

I think the way to address this is change the top-level <p> tags to <div>, make sure they're styled as they were before (or close enough), and then re-run the HTML through prettier. I think this should fix things?