JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first"></div>
<div class="second">
  <input type="text">
  <input type="text">
  <input type="text">
</div>
<div class="third"></div>

CSS

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.first {
  float: left;
  width: 25%;
  height: 500px;
  background: pink;
}
.second {
  float: left;
  width: 41.6666%;
  height: 500px;
  background: cyan;
}
.third {
  float: left;
  width: 33.3333%;
  height: 500px;
  background: lightgray;
}
input:first-child {
  float: left;
  width: 72px;
  margin-right: 4px;
}
input:nth-child(2) {
  float: left;
  width: 52px;
   margin-right: 4px;
}
input:last-child {
  float: left;
  width: calc(100% - 132px);
}