JSFiddle - React, Tailwind, and code Playground

HTML

0. Grid does not have a fixed height.
<main>
  <section contenteditable class="left">
    1. The left column should determine the preferred size of the grid.
    If the right column can fit this height it should not make grid grow any further.
  </section>
  <div class="right">
    <section contenteditable>
      2. The top area should show all its content without additional space.
    </section>
    <section contenteditable class="middle">
      3. The middle area is a problem.<br>
      It should be strictly between top and bottom areas with gaps equal to grid-gap.
      Its height should be limited by 40px as minimum and its contents as maximum.
      The height is determined by the left column - it should never exceed height of contents and should be <em>as small as needed</em> to make columns having the same height.
      Content that doesn't fit into the area should be cropped (overflow: hidden).
    </section>
    <section contenteditable>
      4. The bottom area should follow the middle one without extra space between them (except grid-gap) and may (or may not - irrelevant) have some free space in the bottom if the left column is longer.
    </section>
  </div>
</main>
5. Content placed in normal flow should follow bottommost point of the grid regardless witch column contains longer content.

CSS

main {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 20px;
  line-height: 20px;
}

section {
  background: silver;
}

.left {
  grid-row: 1 / -1;
}

.right {
  contain: size;
  display: grid;
  grid-gap: 20px;
  grid-template-rows: auto auto 1fr;
}

.middle {
  background: antiquewhite;
  min-height: 40px;
  max-height: 160px;
  overflow: hidden;
}