JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="top">
    <div class="first">1</div>
    <div class="second">2</div>
    <div class="third">3</div>
  </div>
  <div class="bottom">bottom</div>
</div>

CSS

.main {
  width: 500px;
  margin: 10px auto 0 auto;
  border: 1px solid #000000;
}
.main .top {
  border-bottom: 1px solid #000000;
  background-color: #CDCDCD;
  display: inline-block;
  width: 100%;
}
.main .top .first {
  width: 140px;
  padding: 4px;
  float: left;
  background-color: #FFCC66;
}
.main .top .second {
  width: calc(100% - 264px);
  padding: 4px;
  float: left;
  background-color: #FF9966;
}
.main .top .third {
  width: 100px;
  padding: 4px;
  float: left;
  background-color: #FF6666;
}
.main .bottom{
  clear: both;
  height:60px;
  padding: 4px;
}