JSFiddle - React, Tailwind, and code Playground

HTML

<script src="flexiejs.com/js/flexie.min.js"></script>
<div id="container">
    <div class="item">Item One</div>
    <div class="item">Item Two</div>
    <div class="item">Item Three</div>
    <div class="item">Item Four</div>
    <div class="item">Item Five</div>
    <div class="item">Item Six</div>
    <div class="item">Item Seven</div>
</div>

CSS

#container {
    margin: 100px;
    padding: 10px;
    border: 1px solid blue;
    display: -webkit-box;     /* iOS 6-, Safari 3.1-6 */
    display: -moz-box;        /* Firefox 19- */
    display: -ms-flexbox;     /* IE 10 */
    display: -webkit-flex;    /* Chrome */
    display: flex;            /* Opera 12.1, Firefox 20+ */
    
    /* iOS 6-, Safari 3.1-6 */
    -webkit-box-orient: horizontal;
    -webkit-box-pack: justify;
    -webkit-lines: multiple;  /* Only here for informative purpose, this line is what should have made it work, it has never been implemented */     

    /* Firefox 19- */
    -moz-flex-flow: row wrap;
    -moz-justify-content: space-between;
    -moz-box-lines: multiple; /* Only here for informative purpose, this line is what should have made it work, it has never been implemented */ 
    
    /* Chrome */
    -webkit-flex-flow: row wrap;
    -webkit-justify-content: space-between;
    
    /* IE10 */
    -ms-flex-flow: row wrap;
    -ms-justify-content: space-between;
    
    /* Opera 12.1, Firefox 20+ */
    flex-flow: row wrap;
    justify-content: space-between;
}
.item {
    margin: 10px;
    width: 300px;
    border: 1px solid red;
    -webkit-box-flex: auto;    /* iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1.0;        /* Firefox 19- */
    -webkit-flex: auto;        /* Chrome */
    -ms-flex: auto;            /* IE10 */
    flex: auto;                /* Opera 12.1, Firefox 20+ */
}