JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer_container">
    <div class="middle_container">
        <div class="content">Some Content</div>
        <div class="content">Some Content</div>
        <div class="content">Some Content</div>
        <div class="content">Some Content</div>
    </div>
</div>

CSS

body { margin: 10px 0; }

.outer_container {
    display: flex;
	flex-wrap: nowrap;
	justify-content: stretch;
}

.outer_container::before,
.outer_container::after {
    content: '';
    flex: 4 0 0;
}

.middle_container {    
    display: flex;
    flex: 1 0 104px;
	flex-wrap: wrap;
    justify-content: space-between;
}

.content{
    width: 50px;
    border: solid 1px red;
}
@media screen and (min-width: 260px) {
    .middle_container { flex: 3 0 208px; }
}