JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="left">LEFT</div>
    <div id="center">CENTER</div>
    <div id="right">==== RIGHT ====</div>
</div>

CSS

div {
    border: 1px solid silver;
    box-sizing: border-box;
    padding: 0.5em 1em;
}
#main {
    position: relative;
    overflow:hidden;
    text-align: center;
}
#left {
    float:left;
}
#right {
    float:right;
}
#center {
    position: absolute;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 500px) {
    #center {
        position: static;
        transform: none;
    }
}