Want p to stay in the same position - html

Question

When I click the buttons, there is some text added to the ul which is at the top left.
my p is on the right of the page and it moves down as more text(row)s are added. I want it to stay there. What code should i add?
<ul id="elementlist">
</ul>
<button onclick="addWater()"> Add Water </button>
<button onclick="addFire()"> Add Fire </button>
<div style="float:right;">
<p>aaaa</p>
</div>
<script type="text/javascript">
function addWater() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("elementlist").appendChild(node);
}
function addFire() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Fire");
node.appendChild(textnode);
document.getElementById("elementlist").appendChild(node);
}
</script>

Answer 1

Wrap the <p> tag inside a custom div and apply position: fixed into that div and adjust top and right to make it work.
.custom-pos {
position: fixed;
right: 2%;
top: 0;
}
<ul id="elementlist">
</ul>
<button onclick="addWater()"> Add Water </button>
<button onclick="addFire()"> Add Fire </button>
<div class="custom-pos">
<p>aaaa</p>
</div>

Answer 2

You could use position fixed (or absolute) as suggested,
or you can achieve the same using flexbox, if you can avoid supporting old browsers:
function addWater() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("elementlist").appendChild(node);
}
function addFire() {
var node = document.createElement("LI");
var textnode = document.createTextNode("Fire");
node.appendChild(textnode);
document.getElementById("elementlist").appendChild(node);
}
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
.container {
overflow: hidden;
height: 100%;
display: flex;
}
.content {
padding: 5px;
flex: 1;
overflow: auto;
}
.sidebar {
padding: 5px;
flex: 0;
}
<div class="container">
<main class="content">
<ul id="elementlist">
</ul>
<button onclick="addWater()">Add Water</button>
<button onclick="addFire()">Add Fire</button>
</main>
<div class="sidebar">
<p>aaaa</p>
</div>
</div>