JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
  <div class="row--item">left</div>
  <div class="row--item">center</div>
  <div class="row--item">right</div>
</div>

CSS

.row {
  background: #ddd;
  
  text-align: justify;
  line-height: 0;
  font-size: 0;
  
  text-justify: newspaper;
}

.row:after,
.row--item {
  display: inline-block;
  vertical-align: top;
  
  text-align: left;
  line-height: 1.4;
  font-size: 16px;
}

.row:after {
  content: "";
  
  width: 100%;
}

.row--item {  
  padding: 20px 40px;
  
  background: #777;
}


@supports (display: flex) {
  
  .row {
    display: flex;
    justify-content: space-between;
  }
  
  .row:after {
    display: none;
  }
  
  .row--item {
    display: block;
  }
  
}