JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="wide" checked>
<label for="wide">Wide</label>

<div id="parent">
  <div id="container">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

CSS

body{padding:1rem 3rem}*{box-sizing:border-box}

#parent {
  background-color: #eee;
  border: .75em solid;
  
  overflow: auto;
  
  width: 220px;
}
#wide:checked ~ #parent {
  width: 440px;
}

#container {
  display: grid;
  grid-template-columns: 170px 70px;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  
  justify-content: space-evenly;
  min-width: calc(250px + 1.5em); /* = 170px + 70px + 10px (gap) + 1.5em (padding)*/
  
  padding: .75em;
}

.cell {
  background-color: rgba(0,0,255,.2);
  border: 3px solid #00f;
}