JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" dir="rtl">
    <div id="nav">
        <ul>
            <li>حقيقة مثبتة منذ</li>
            <li>مرج</li>
        </ul>
    </div>
</div>

CSS

#wrapper {
    width: 500px;
    display: block;
    border: 1px solid red;
    height: 80px;
}

ul {
    float: left;
    list-style-type: none;
    border: 1px solid blue;
    padding: 10px;
}

li {
    float: right;
    border: 1px solid green;
    padding: 5px;
}