JSFiddle - React, Tailwind, and code Playground

HTML

<!-- float+position+margin（两侧自动，中间定宽） -->
<div class= 'father'>
  <div class="box left">左</div>
  <div class="box center">中</div>
  <div class="box right">右</div>

</div>

CSS

html,body{margin:0; padding: 0;}

.box{ height: 200px; line-height:200px; text-align:center; background-color: #FAD7F0;}

.father{display:flex;}
.left{ flex:1;background-color: #FAD7F0;}
.right{flex:1;background-color: #FAD7F0;}
.center{width:200px;background-color: lightblue;}