How can I fix spacing to the right of screen

Question

So far the in my html file I have a canvas and a div tag. The div tag contains four paragraph tags which I'm trying to set at the top of the screen, in the middle, and inline. The problem arises when I set them inline and try to add some padding to it. The the third paragraph suddenly just drops to under the first paragraph. Heres the css and html right now.

body {
    width: 100%;
    height: 100%;
    border: 1px solid azure;
}

canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    user-select: none;
    background-color:rgb(33, 96, 33);
    border: 1px solid azure;
}

div {
    position: absolute;
    font-size: 130%;
    color:azure;
}

p {
    transition: opacity 0.3s ease-in-out;
    color:azure;
    border: 1px solid azure;
    display: inline;
    padding-right: 10%;
}

<canvas id="canvas1"></canvas>
<div id="Events">
  <p id="clicks">Clicks:</p>
  <p id="dbClicks">Double Clicks:</p>
  <p id="mouseLeft">Mouse Left:</p>
  <p id="keyPress">Key Presses:</p>
</div>

I tried getting rid of all the margin and padding so I did

margin: 0; padding: 0;

Answer 1

You can set the <p> tag display: inline-block; and set the container of these four paragraph width: 100vw;.

  body {
    width: 100%;
    height: 100%;
    border: 1px solid azure;
  }

  canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    user-select: none;
    background-color: rgb(33, 96, 33);
    border: 1px solid azure;
  }

  div {
    position: absolute;
    font-size: 130%;
    color: azure;
    width: 100vw;
  }

  p {
    transition: opacity 0.3s ease-in-out;
    color: azure;
    border: 1px solid azure;
    display: inline-block;
    padding-right: 10%;
  }

<canvas id="canvas1"></canvas>
<div id="Events">
  <p id="clicks">Clicks:</p>
  <p id="dbClicks">Double Clicks:</p>
  <p id="mouseLeft">Mouse Left:</p>
  <p id="keyPress">Key Presses:</p>
</div>