JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bigwrap">
    <div class="container">
        <div class="left">
            <img src="cat1.jpeg" alt="cat">
            <img src="cat1.jpeg" alt="cat">
        </div>
        <div class="middle">
            <div class="box">
                <p>
                    This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
                    This is text. This is text. This is text. This is text. This is text. This is text.
                </p>
            </div>
            <div class="box">
                <p>
                    This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
                    This is text. This is text. This is text. This is text. This is text. This is text.
                </p>
                <p>
                    This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text. This is text.
                    This is text. This is text. This is text. This is text. This is text. This is text.
                </p>
            </div>
        </div>
        <div class="right">
            <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
            <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
            <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
        </div>
    </div>

CSS

* {
    margin: 0;
}

html,
body {
    height: 100%;
}

#bigwrap {
    position: relative;
    height: 100%;
}

.container {
    display: flex;
    position: absolute;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* http://stackoverflow.com/q/36817249/3597276 */
}

.container img {
    width: 200px;
    height: 200px;
}

.left {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    justify-content: space-around;
    order: 1;
    background: red;
    flex-basis: 100%;
    height: 100%;
}

.left img {
    max-width: 100%;
}

.middle {
    display: flex;
    flex-flow: column wrap;
    order: 3;
    background: green;
    flex-basis: 100%;
    height: 100%;
}

.right {
    text-align: center;
    order: 2;
    background: yellow;
    flex-basis: 100%;
    height: 100%;
}

.box {
    /* height: 200px;                  Remove. This limits the height of the paragraph */
    width: 200px;
}

.box > p {
    margin-bottom: 25px;               /* created separation between text boxes */
}

@media screen and (min-width: 600px) {
    .container {
        flex-wrap: nowrap;
    }
    .left {
        flex-basis: 1;
        order: 1;
    }
    .middle {
        flex-basis: 1;
        order: 2;
    }
    .right {
        flex-basis: 1;
        order: 3;
    }
}