Here is the code and styles I have in my project:
I want to align the texts and span style.
My default code looks 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 to make my list look like the image above:
How can I align it like the image above? (My body direction is rtl)