JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="col-one-third">
        <p>test</p>
    </div>
    <div class="col-two-third">
        <p>test</p>
    </div>
    <div class="col-one-third">
        <p>test</p>
    </div>
</div>

CSS

.row {
    width: 100%;
    position: relative;
    background: red;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 40px;
}
.row:after {
    content:"";
    display: table;
    clear: both;
}
.row *[class^="col-"] {
    position: relative;
    display: block;
    height: auto;
}
.row *[class^="col-"]:first-child {
    margin-left: 0;
}
@media (min-width: 64em) {
    .row {
        box-orient: horizontal;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}
@media (min-width: 78.75em) {
    .row {
        max-width: 78.75em;
        margin: 0 auto;
    }
}
.col-one-third {
    width: 100%;
    background: red;
    max-width:100%;
}
@media (min-width: 64em) {
    .col-one-third {
        width: 33.3%;
        margin-left: 40px;
    -ms-flex: 1 0 auto;
    flex: 1;
    }
}
.col-two-thirds {
    width: 66.7%;
    margin-left: 40px;
    background: blue;
}