JSFiddle - React, Tailwind, and code Playground

by Michael Mandarino

HTML

<flex-container>
    <flex-item>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
        <p>Text Text Text</p>
    </flex-item>
    <flex-item>
        <div>Forward</div>
    </flex-item>
</flex-container>

CSS

body {
    height: 300px;
    color: white;
}

flex-container {
    display: flex;                 /* primary flex container */
    flex-direction: row;           /* horizontal alignment of flex items (default value; can be omitted) */
    align-items: stretch;          /* will apply equal heights to flex items (default value; can be omitted) */
    height: 100%;
}

flex-item {
    display: flex;                 /* nested flex container */
    flex-direction: column;        /* vertical alignment of flex items */
    justify-content: center;       /* center flex items vertically */
    align-items: center;           /* center flex items horizontally */
}

flex-item:first-child {
    background-color: #a333c8;
    flex: 3;                       /* consume 3x available space than sibling;
                                      more details: http://stackoverflow.com/q/34644807/3597276 */
}

flex-item:last-child {
    background-color: #db2828;
    flex: 1;
}

JavaScript

// Add javascript here