<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid black;
    }
    :dir(rtl) {
        margin-left: 200px;
    }
    :dir(ltr) {
        margin-left: 100px;
    }
    :dir(wheeee) {
        width: 1000px !important;
    }
</style>
<div>Well, hello friends!</div>
<div dir="ltr">Well, hello friends!</div>
<div dir="rtl">Well, hello friends!</div>
<div dir="auto">Well, hello friends!</div>
<div>حسنًا ، مرحباً أيها الأصدقاء</div>
<div dir="ltr">حسنًا ، مرحباً أيها الأصدقاء</div>
<div dir="rtl">حسنًا ، مرحباً أيها الأصدقاء</div>
<div dir="auto">حسنًا ، مرحباً أيها الأصدقاء</div>