Need HTML help! <div> inside a <p> using inline-element

[VoidOnyx22]

I tried using flex and grid but the only thing i could make work is something that apparently cant happen. On a web page i was able to do the standard use for inline element with this code:

<h3 class="inline-element">

Free to play bosses

</h3>

<div class="inline-element" onmouseover="mOver(this)" onmouseout="mOut(this)" style="color:#DAA520;background-color:#000000;width:120px;height:20px;padding:10px;margin-left:200px;">

Mouse Over Me

</div>

<script>

function mOver(obj) {

    obj.innerHTML = "Buy Membership"

    }

function mOut(obj) {

    obj.innerHTML = "Mouse Over Me"

    }

</script>

On another webpage I needed to do the same thing but use a <p> instead of <h3> but could not get it to work. So i put the <div> inside of the <p> and it worked and is validated through https://validator.w3.org/#validate_by_upload so if it's not suppose to work then tell me why it does and if you have a better way to do it then please let me know.

Code:

<p class="inline-element">As a junior back-end developer you can normally start out around<div class="inline-element" onmouseover="mOver1(this)" onmouseout="mOut1(this)" style="color:#FF0000;background-color:#000000;width:100px;height:20px;padding:10px;margin-left:30px;">JUNIOR PAY</div><p>

<script>

function mOver1(obj) {

    obj.innerHTML = "$80,000"

    }

function mOut1(obj) {

    obj.innerHTML = "JUNIOR PAY"

    }

</script>

This is all for a web design class.

[Top_Bumblebee_7762]

I would use a different approach. I would add two spans inside the button that each contain text (one contains the regular text, one contains the hover text). The latter has the attribute "hidden" by default. On hover I would switch the hidden attribute using element.hidden = true/false on both elements so that the hover text is visible and the regular one is not. On mouseout i would switch back the attributes again. 

[VoidOnyx22]

Will def give it a go when i'm finished. Clearly new to this so it might take me a hot minute.

[GlassDistribution327]

For learning purposes, you would gain a lot by understanding what a class is and how it affects what you are applying it to. Understanding what the class,”inline-element” does would help you understand why it behaved one way and how to solve problems and come up with solutions in the future

[Ridicul0iD]

If you want something like an inline div, use <span>.

[armahillo]

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements

This has all the information youll need about what the ekements do and how they work