Fill DIV child's content to overall grid layout

Issue

I am trying to manage the grid with css on my site. Using Bootstrap 4.x I created both divs to have the same height using display:grid. My problem is I don't know how to manage the kids inside. I try to make the contenteditable div and using Javascript show the user server-side information. I can't get the DIV height to work with parent content. I do not want to hard-code its height. I would like to define based on inheritance.

<div class="row">   
    <div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12" style="display: grid;">
        <div class="card shadow mb-4">          
            <div class="card-header py-3">
                <h6 class="card-title m-0 font-weight-bold text-primary">
                    param
                </h6>
            </div>              
            <div class="card-body">             
                <div class="row mb-2">                  
                    <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                        <textarea rows="13" maxlength="1500"></textarea>
                    </div>                      
                </div>                  
            </div>
        </div>
    </div>      
    <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12" style="display: grid;">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="card-title m-0 font-weight-bold text-primary">
                    consol
                </h6>
            </div>
            <div class="card-body">
                <div class="row mb-2">                  
                    <div id='console' class='mb-2'
                        style="min-height: 150px; border-radius: 5px; resize: none; width: 100%; height: 100%; border: 0px; background-color: #f8f8f8; padding: 2px 2px;"
                        name="console" contenteditable="false"></div>
                </div>                  
            </div>              
        </div>
    </div>
</div>

For better understanding and visualisation i made an image.

Solution

try to setup second card-body row height:100% ; Bootstrap has class "h-100".

            <div class="card-body">
            <div class="row mb-2" style="height:100%">                  
                <div id='console' class='mb-2'
                    style="min-height: 150px; border-radius: 5px; resize: none; width: 100%; height: 100%; border: 0px; background-color: #f8f8f8; padding: 2px 2px;"
                    name="console" contenteditable="false"></div>
            </div>                  
        </div>

Answered By - ED Wu