JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div class='app'>
    <div class='sidebar'>
        Sidebar
    </div>
    <div class='main'>
        <textarea class='content'></textarea>
        <div class='options'>
            Options
        </div>
    </div>
</div>

CSS

html,
body{
    width: 100%;
    height: 100%;
    background-color: #eaeaea;
}

.app{
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
}

.sidebar{
    flex-grow: 1;
    max-width: 200px;
    background-color: #eee;
}

.main{
    display: flex;
    flex: 1;
    align-items: stretch;
    flex-direction: column;
    background-color: #ddd;
}

.content{
    flex: 1;
    background-color: #ccc;
    overflow-y: scroll;
    height: 5000px;
    resize: none;
}

.content .wrap{
    height: 5000px;
}

.options{
    display: flex;
    flex: 1;
    padding: 1em;
    align-items: flex-end;
    max-height: 1em;
    background-color: #bbb;
}

.sidebar{ background-color: tomato; }
.main{ background-color: lightblue; }