JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<div class="flex">
  <div>1111111111 1111111111 1111111111</div>
  <div>3333333333 3333333333 3333333333</div>
  <div>4444444444 4444444444 4444444444</div>
</div>

/*
<div id="container">
    <div id="left">11111111111111111111111111111</div>
    <div id="mid">mid</div>
    <div id="right">44444</div>
</div>
*/

CSS

@media screen and (max-width:640px) {
/*FLEX SOLUTION*/

div.flex {
    display : flex;
    display: -webkit-box;
    display: -webkit-flex;
    
    flex-direction: row-reverse;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -webkit-flex-direction: reverse;
        
    /*-webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;*/
        
    width: 100%;
    height: 10em;
    margin-bottom: 1em;
    min-width: 640px;
}
div.flex div:nth-child(1) {
    flex-grow: 1;
    text-align: right;
    background: aqua;
    overflow: hidden;
    min-width: 70px;
}
div.flex div:nth-child(2) {
    text-align: center;
    width: 480px;
    min-width: 480px;
    background: #ff002b;
}
div.flex div:nth-child(3) {
    flex-grow: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    
    text-align: left;
    background: #00a753;
    overflow: hidden;
    min-width: 70px;
}
}

/*Container SOLUTION*/

#container {
    width: 100%;
    height: 200px;
    display: table
}
#left, #mid, #right {
    display: table-cell;
    background: #ccc;
    outline: 2px dashed blue;
    /*overflow: hidden;*/
    /*min-width: 10px;*/
    /*width:auto !important; */
}
#mid {
    width: 480px;
    min-width: 480px;
    max-width: 480px;
    background: #f0f
}

#left, #right {
    max-width: 20px;
    overflow: hidden;
}