I would suggest you to use inline element instead of p like below –

<span id='hello'>Hello</span>

Because p is block element and no matter where your contents gets over in the line it will takes the space of whole line.

For more in details refer this link

I write an example, I think this helps you
you can see the link

  <buttom onclick="clickMe()">click me please</buttom>
  <div>
    <p id="write"></p>
  </div>

<script>
     function clickMe() {
        let getELementP = document.getElementById("write");
        getELementP.innerHTML = "writeHere";
      }
</script>

So what I’m trying to make is a paragraph in HTML and then when you click on it it would do a certain action, for example:

<p id='hello'>Hello</p>

<script>
hello.onclick = function() {
 console.log("clicked!");
}
</script>

the only problem is that when I click next to the text, it still detects it as a click, I want the click ratio to be the length of the paragraph’s text. What’s the best way I could do this?