JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child-1">

  </div>
  <div class="child-2">

  </div>
</div>

CSS

.parent {
  --main-width: 400px;

  width: var(--main-width);
  height: 300px;
}

.child-1 {
  width: calc(var(--main-width) / 4 + 50px);
  height: 100%;
  background: red;
  float: left;
}

.child-2 {
  width: calc(var(--main-width) / 4 - 50px);
  height: 100%;
  background: orangered;
  float: right;
}

@media (min-width: 800px) {
  .parent {
    --main-width: 800px;
  }
}