JSFiddle - React, Tailwind, and code Playground

HTML

only horizontal, may be to use: rtl/ltr of tables<br>
should work in all broswers that support table-cell css<br>
<br>
    
    
normal:<br>

    <div class="container">
        <section>1</section>
        <article>2</article>
        <aside> <span>א</span><span>.</span> </aside>
    </div>
    
    <br>
reverse:<br>

    <div class="reverse">
        <div class="container">
            <section>1</section>
            <article>2</article>
            <aside> <span>א</span><span>.</span> </aside>
        </div>
    </div>

CSS

.container { 
    display: table; 
    direction:ltr; /*ltr here is not required*/
}
.container>* {
    display: table-cell; /*only works with table-cell*/
    direction:ltr; /*ltr here is not required*/
}

.reverse .container { 
    display: table; 
    direction:rtl /*change the outside direction to rtl*/
} 
.reverse .container>* {
    display: table-cell;
    direction:ltr /*inside switch back to ltr if needed*/
}