JSFiddle - React, Tailwind, and code Playground

HTML

<h2>box-flex</h2>
                <div class="flex-container">
                    <div class="col-2">I am column 2</div>
                    <div class="col-3 col-3-flex">I am column 3</div>
                </div>

CSS

.flex-container {
    width: 100%;
    display: -moz-box;
    display: -webkit-box;
    display: box;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
    outline: 1px solid #f00;
    margin-bottom: 20px;
}

.flex-container div {
    padding: 10px;
}


.col-2 {
    color: #fff;
    background: #00f;
    height: 200px;
    width:10px
}

.col-3 {
    background: #0f0;
}

.col-2-flex {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}

.col-3-flex {
    -moz-box-flex: 3;
    -webkit-box-flex: 3;
    box-flex: 3;
    
}