JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
<div class="left">
    left
</div>
<div class="right">
    right
</div>
<div class="center">
    center | A collection of textile samples lay spread out on the table 
</div>
    </div>

CSS

.wrap{
    text-align:center
}
.left{
    float: left;
    background:grey
}
.right{
    float: right;
    background:red
}
.center{
text-align:left;
    background:green;
    margin:0 auto !important; 
   display:inline-block
}

@media screen and (min-width: 400px) and (max-width: 550px) {
  .center {
    display: block;
    max-width: 370px;
  }
}