Fix checkbox position in RTL lists

What does this MR do and why?

By now, if one adds a textbox in RTL list, text shows on right side but the box shows on the left. There are two issues:

• box is positioned absolute with hard-coded left position.
• list padding from right side is not correct so if the box moves to right, they overlap each other.

This MR fixes both issues by using new CSS properties which work with inline/block. So depending on the context, the box get positioned in correct side (right for RTL and left for LTR). The same happens for list padding.

Screenshots or screen recordings

Current situation (before the fix):

After fix:

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

You may add this text in issue or MR body text and check re preview:

list:
- [ ] first item
- [ ] second item

فهرست کارها:

- [ ] کار اول
- [ ] کار دوم

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Note: I have not checked this MR with automated tests since I don't know how to do it. But I have checked the impact on browser visually and it works. If there is any particular test cases for RTL or bidi support, please share with me otherwise I have done whatever I could think of. So, I didn't check the above checkbox for this reason.