JSFiddle - React, Tailwind, and code Playground

by TimWolla

HTML

<div id="main">
    <div>
        <div id="content">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        </div>
        <aside>
            b
        </aside>
    </div>
</div>

CSS

#main {
    border: 1px solid red;
    margin: 5px;
}
#main > div {
    -webkit-flex-direction: row;
    display: -webkit-flex;
    flex-direction: row;
    display: flex;
    height: 500px;
}
#content, aside {
    padding: 5px;
}
#content {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    background-color: green;
    width: 500px;
    display: -webkit-flex;
    display: flex;
    overflow-x: auto;
}
aside {
    background-color: blue;
    width: 200px;
}