JSFiddle - React, Tailwind, and code Playground

by miSunLaughing

HTML

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

CSS

.parent {
  display: flex;
  /* justify-content: space-between; */
  /* align-content: flex-start; */
  height: 300px;
  width: 300px;
  margin: 1px;
  border: 1px solid #0f0;
}

.left {
  width: 10px;
  height: 100px;
  margin: 1px;
  border: 1px solid #00f;
  /* float: left; */
}
.center{
  height: 100px;
  /* flex-grow: 2; */
  margin: 1px;
  border: 1px solid #f00;
  /* overflow: hidden; */
  width:100%;
}

.right {
  /* float: right; */
  width: 10px;
  height: 100px;
  border: 1px solid #f00;
}