JSFiddle - React, Tailwind, and code Playground

HTML

<div class="footer-wrapper">
<div class="footer">
<div class="left fixed"></div>
<div class="right fixed"></div>
</div>
<div class="responsive black"></div><div class="responsive red"></div>
</div>

CSS

.footer-wrapper {
  height: 100px;
  width: 100%;
  position: relative;
}
.footer {
  width: 500px;
  margin: 0 auto;
  height: 100%;
}
.fixed {
  width: 50%;
  height: 100%;
  float: left;
}
.left {
  background: blue;
}
.right {
  background: lightblue;
}
.responsive {
  position: absolute;
  height: 100px;
  width: 50%;
  z-index: -1;
  top: 0;
}
.black {
  background: black;
  left: 0;
}
.red {
  background: red;
  right: 0;
}