JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left_container">
    <div id="left">
        left content
    </div>
</div>

<div id="center">
    center content
</div>

<div id="right_container">
    <div id="right">
        right content
    </div>
</div>

CSS

#left_container {
  width:50%;
  float:left;
  margin-right:-300px; /* minus half of the center container width */
  margin-left:auto;

  /* not important */
  height: 200px;
}
#left {
  margin-right:300px; /* half of the center container width */

  /* not important */
  background: #888;
  height: 200px;
}
#center {
  width:600px; /* size of the fixed width */
  float:left;

  /* not important */
  color: #FFF;
  background: #333;
  height: 500px;
}
#right_container {
  width:50%;
  float:right;
  margin-left:-300px; /* minus half of the center container width */

  /* not important */
  height: 300px;
}
#right {
  margin-left:300px; /* half of the center container width */

  /* not important */
  height: 300px;
  background-color: #888;
}