Html ccs custom radio button right to left - html

Question

I have been created custom radio button right to left
i used code from w3school
custom radio button w3school
but it's not working as right to left
that's mean first circle of radio and next text
.radioContainer{
display: inline-block;
position: relative;
cursor: pointer;
font-family: sans-serif;
font-size: 22px;
user-select: none;
padding-left: 30px;
direction: rtl;
}
.radioContainer input {
display:none;
}
.radioContainer .circle{
display: inline-block;
width: 25px;
height: 25px;
background-color: #eee;
position: absolute;
left: 0;
top: 0;
border-radius: 50%;
}
.radioContainer:hover .circle{
background-color: #ccc;
}
.radioContainer input:checked + .circle{
background-color: #2196fc;
}
.radioContainer input:checked + .circle:after{
content: "";
width: 10px;
height: 10px;
background-color: white;
position: absolute;
border-radius: 50%;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
<label class="radioContainer">my text1
<input type="radio" name="radio">
<span class="circle"></span>
</label>
<br/>
<label class="radioContainer">my text2
<input type="radio" name="radio">
<span class="circle"></span>
</label>
I want to change direction of label or put all the radio buttons on to div and set direction of div from right to left, but it's not working

Answer 1

Change padding-left to padding-right in radioContainer class.
And also change left to right in .radioContainer .circle
Your final CSS must be like this:
.radioContainer{
display: inline-block;
position: relative;
cursor: pointer;
font-family: sans-serif;
font-size: 22px;
user-select: none;
padding-right: 30px;
direction: rtl;
}
.radioContainer input {
display:none;
}
.radioContainer .circle{
display: inline-block;
width: 25px;
height: 25px;
background-color: #eee;
position: absolute;
right: 0;
top: 0;
border-radius: 50%;
}
.radioContainer:hover .circle{
background-color: #ccc;
}
.radioContainer input:checked + .circle{
background-color: #2196fc;
}
.radioContainer input:checked + .circle:after{
content: "";
width: 10px;
height: 10px;
background-color: white;
position: absolute;
border-radius: 50%;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}