JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="left">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div class="center">b</div>
  <div class="right">c</div>
  <div class="clear"></div>
</div>

<div class="container">
  <div class="left">a</div>
  <div class="center">b</div>
  <div class="right">c</div>
  <div class="clear"></div>
</div>

CSS

.container {right: 0; text-align: center; position: relative;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { position: absolute; left: 50%; transform: translateX(-50%);}
.container .right { float: right; }
.clear { clear: both; }