JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="foo">
  <div class="barbaz"><div class="bar"></div></div>
  <div><div class="bar"></div></div>
</div>

SCSS

.foo {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  
  > div:first-child {
    grid-column: 1;
    
    .bar {
      max-width: 100%;
      min-width: 200px;
    }
  }
  
  > div:last-child {
    grid-column: 2;
  }
}

.bar {
  background: blue;
  padding: 1rem;
}