JSFiddle - React, Tailwind, and code Playground

by Wener

HTML

<div id="wrapper">
    <div class="left">
    </div>
    <div class="middle">
    </div>
    <div class="right">
    </div>
</div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin:0;
  padding:0;
  overflow: hidden;
}
#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  font-size: 0;
  min-width: 600px;
  min-height: 400px;
  
}
#wrapper > div {
  display: inline-block;
  height: 100%;
  position: relative;
  vertical-align: top;
  font-size: 12px;
}
#wrapper .left {
  width: 30%;
  max-width: 200px;
  min-width: 100px;
  background-color: #def2fa;
}
#wrapper .middle {
  width: 30%;
  max-width: 200px;
  min-width: 100px;
  background-color: #c9e9f6;
}
#wrapper .right {
  max-width: 100%;
  width: 40%;
  min-width: 200px;
  background-color: #b3e0f2;
}