How can I keep the bullets of a list aligned when the list is aligned to the right?

Issue

I have a list on a rich text and the user is going to be able to move that list from left-center-right.

I found this image of a list doing what I do not need:

I need that if I move the list to the right, or to the center, the bullets keeps all aligned. In the image above the left list has the bullets aligned, while the one on the right are misaligned.

I created a pen where you can play around with 3 different lists. https://codepen.io/maketroli/pen/JjOgKqO?editors=1100

There you will see this code:

<ul>
  <li class="bullets-inside">Mountain Lion</li>
  <li class="bullets-inside">Lioness</li>
  <li class="bullets-inside">Cheetah</li>
</ul>

.bullets-inside {
  text-align: right;
  list-style-position: inside;
}

It is for the last list where the bullets are close to the text but it has the bullets misaligned.

For example the second snippet has the text to the right but all the bullets aligned to the left. I need close to the text and aligned.

Any ideas?

I created the snippet here too:

.bullets-left {
  text-align: left;
}

.bullets-right {
  text-align: right;
}

.bullets-inside {
  text-align: right;
  list-style-position: inside;
}

<hr />
<strong>Bullets Right</strong>
<hr />
<ul>
  <li class="bullets-right">Mountain Lion</li>
  <li class="bullets-right">Lioness</li>
  <li class="bullets-right">Cheetah</li>
</ul>
<hr />
<strong>Bullets Left</strong>
<hr />
<ul>
  <li class="bullets-left">Mountain Lion</li>
  <li class="bullets-left">Lioness</li>
  <li class="bullets-left">Cheetah</li>
</ul>
<hr />
<strong>Bullets Inside</strong>
<hr />
<ul>
  <li class="bullets-inside">Mountain Lion</li>
  <li class="bullets-inside">Lioness</li>
  <li class="bullets-inside">Cheetah</li>
</ul>

Solution

I tried to reproduce your issue and made some changes to it. Instead of moving the li , I move the ul part to the right using the flexbox property. I have attached the snippet. Hope that's how you wanted it to look.

ul {
 list-style-position: inside;
  display: flex;
  flex-direction: column;
  width: 100%;
}
li {
  float: right;
  min-width:200px;
}

.list-right {
  justify-content: end;
  align-items:end;
}

<hr />
<strong>Bullets Right</strong>
<hr />
<ul class="list-right">
  <li>Mountain Lion</li>
  <li>Lioness</li>
  <li>Cheetah</li>
</ul>
<hr />

Answered By - Ankit Saxena