align list items in one line - html

Question

i have this codes & styles in my project:
i want to aling the texts and span style
my default code image like this:
body {
direction: rtl
}
div {
position: absolute;
top: 30px;
right: -100px;
height: 300px;
overflow-y: scroll;
background-color: #fff;
box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);
border-radius: 15px;
}
li {
display: flex;
align-items: baseline;
justify-content: space-between;
}
span {
background-color: #eeeeee;
width: 20px;
height: 20px;
border-radius: 50%;
}
<div>
<ul>
<li>
English<span></span>
</li>
<li>
Spanish<span></span>
</li>
<li>
French<span></span>
</li>
<li>
Russian<span></span>
</li>
<li>
Arabic<span></span>
</li>
<li>
Japanese<span></span>
</li>
<li>
indian<span></span>
</li>
</ul>
</div>
I want make my list like this image:
HOW can I align it like image above?
(my body direction is rtl)

Answer 1

change li { justify-content: space-between; } to li { justify-content: flex-end; }
body {
direction: rtl
}
li {
display: flex;
align-items: baseline;
justify-content: flex-end;
}
span {
background-color: #eeeeee;
width: 20px;
height: 20px;
border-radius: 50%;
}
<div>
<ul>
<li>
English<span></span>
</li>
<li>
Spanish<span></span>
</li>
<li>
French<span></span>
</li>
<li>
Russian<span></span>
</li>
<li>
Arabic<span></span>
</li>
<li>
Japanese<span></span>
</li>
<li>
indian<span></span>
</li>
</ul>
</div>