JSFiddle - React, Tailwind, and code Playground

HTML

<div class='main'>
  <div class='main-left'></div>
<!--   <div class='main-right'></div>
   --></div>

SCSS

body {
  margin: 0;
  padding: 0;

  widht: 100%;
  height: 100%;
}

.main {
  width: 880px;
  height: 500px;

  display: flex;

  background: #000;

  &-left {
    width: 100%;
    min-width: 400px;

    background: pink;
    &:last-child {
      width: 100%;
    }
  }

  &-right {
    margin-left: 30px;
    width: 450px;

    background: green;
  }

}