JSFiddle - React, Tailwind, and code Playground

by Denise Nepraunig

HTML

<div id="content">
    <div class="sidebar">sidebar</div>
    <div id="right">
        <div id="topcontent">Topcontent
            Here will my absolute fantastic image slider go wuhu, which is very brilliant and absolutely fantastic and so on and so on
        </div>
        <div id="maincontent">
            <div class="test">social media</div>
            Here will be my absolute awesome social media content directly out of blue kiwi with all the cool features and so on and uuuuuuh wow and for sure and hell yeah and so
            <div class="test">map</div>
        </div>
    </div>
    
</div>

CSS

#content {
    display: flex;
    flex-flow: row;
    height: 100%;
    width: 100%;
    background-color: red;
}

.sidebar {
    width: 100px;
    background-color: Yellow;
}

#right {
    display: flex;
    flex-flow: column;
}

#maincontent {
    display: flex;
    flex-flow: row;
    background-color: blue;
}
.test {
    flex: 1;
    background-color: green;
    
}