JSFiddle - React, Tailwind, and code Playground

sidebar left, but down in code

by bitstarr

HTML

<div class="page">
    <div class="content">
        <h1>Content</h1>
    </div>
    <div class="sidebar">
        <h2>Sidebar</h2>
    </div>
</div>

CSS

.page {
    display: table;
    direction: rtl;
    width: 100%;
}

.content {
    background: green;
    float: right;
    display: table-cell;
    direction: ltr;
    width: 100%;
    vertical-align: top;
}

.sidebar {
    background: red;
    display: table-cell;
    direction: ltr;
    width: 12em;
    vertical-align: top;
}