JSFiddle - React, Tailwind, and code Playground

by Keith Jeter

HTML

<div class="wrap">
<div class="left">dfsdfsdf
</div>
<div class="m">
asda
</div>
<div class="r">
werfkwk
</div>
</div>

CSS

.wrap {
  width: 100%; 
position: relative;
height: 50px;
float: left;
overflow: hidden;;
}

.left {
  float: left;
  width: 25px;
  height: 50px;;
  background: green;
}

.m { float: left;
width: calc( 100% - 50px );
background: yellow;
height: 50px;
}

.r {
  float: left;
  width: 25px;
  height: 50px;
  background: pink;
}