JSFiddle - React, Tailwind, and code Playground

CF Layout

by Christopher O

HTML

<div class="squarebubble topbubble">A</div>
<div id="main">
  <div class="squarebubble mainIn">B</div>
  <div class="squarebubble mainIn">C</div>
</div>

<div class="info">Resize this panel to see grids respond</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: #20262e;
}

#main {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(14px, 1fr)); */
  grid-template-columns: minmax(200px, 1fr) 3fr;
  grid-gap: 10px;
}

.squarebubble{
  background-color: #fff;
  border-radius: 3px;
}

.mainIn {
  padding: 20px;
  font-size: 14px;
}

.topbubble{
  margin-bottom: 10px;
  padding: 10px;
  font-size: 14px;
}

.info {
  text-align: center;
  font-size: 13px;
  padding-top: 20px;
  color: #fff;
}