JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="left">
        leftfdg gerg
    </div>
    <div class="right">
        dfgsdfgsdf dfgsdfgsdf dfgsdfgsdf
    </div>
    <div class="center">
        center sdv dfh
    </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; 
   display:inline-block
}