JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
   <div contenteditable>Text<br>Text<br>Text<br></div>
</div>
<div class="box" style="grid-template-rows: 40%  auto  60%;">
   <div contenteditable>Text<br>Text<br>Text</div>
</div>

<div class="box" style="grid-template-rows: 40%  minmax(auto,1fr)  60%;">
   <div contenteditable>Text<br>Text<br>Text</div>
</div>

<div class="box" style="grid-template-rows: 40%  minmax(0,1fr)  60%;">
   <div contenteditable>Text<br>Text<br>Text</div>
</div>

<div class="box" style="grid-template-rows: 4fr  auto  6fr;">
   <div contenteditable>Text<br>Text<br>Text</div>
</div>

CSS

.box {
    display: inline-grid;
    margin:50px 0;
    vertical-align:top;
    height:200px;
    place-content: center;
    grid-template-rows: 40%  1fr 60%;
    border: 1px solid red;
}
.box > div {
    border: 1px solid;
    width: 100px;
    grid-row: 2;
}
.box:before,
.box:after{
  content:"";
  background:rgba(0,0,255,0.4);
}