How do I seperate multiple fixed positions so they dont overlap?

Question

I have 2 values at the bottom:

.points {
position: fixed;
bottom: 0;
right: 0;
}
.coins {
position: fixed;
bottom 0;
right 0;
}

however they overlap eachother. I tried changing it to (right: 1) for one of them or (left: 15).

I want one value in the left, middle, and right. So you can see the 3, assuming you have 3.

Also, say I wanted another row with 3 values. For example one row has (L: points | M: coins | R: shop) then another row under it has 3 more values.

Sorry for poor wording, thanks tho ;)

Answer 1

this might not b the best way but I always use css' display table and table cell properties, it just kinda makes a table without the borders etc.

.container {
display: table;
width: 100%;
}
.col {
display: table-cell;
width: 33.33%; /* or whatever width u need for each column */
}

<div class="container">
<div class="col">
<!-- left -->
</div>
<div class="col">
<!-- middle -->
</div>
<div class="col">
<!-- right -->
</div>
</div>

u can use this code for reference if u want

https://code.sololearn.com/WSiTH7F0wUWU/?ref=app