How to adjust col to row?

I have a grid system in a page where I want a row to have 2 cols inside of it. The cols are bigger than the row.

JSFIDDLE

Example: If the row has 20px of height, so do the cols.

I want the cols to adjust to the row, not act independent.

<!--HTML-->
<div class="container-fluid">
      <div class="row">
        <div class="col-4"><img src="https://www.w3schools.com/images/w3schools_green.jpg"></div>
        <div class="col-8">
              dhfjk
              <br>fudff
              <br>udfhjdkl
        </div>
      </div>
</div>

/*CSS*/
.col-4{
    text-align: center; 
    padding: 0%;
}

.col-4{
    border: 3px red solid;
}

.col-8{
    border: 3px blue solid;
}

.container-fluid{
    padding: 50px;
}

.row{
    border: 5px solid green;
    max-height: 50px;
}

maybe that can help you

.col-4 {
    text-align: center; 
    padding: 0%;
    max-height: -webkit-fill-available;
     border: 3px red solid;
}

.col-8{
    border: 3px blue solid;
    max-height: -webkit-fill-available;
    overflow: scroll;
}

.container-fluid{
    padding: 50px;
}

.row {
    border: 5px solid green;
    max-height: 50px;
}

.row:nth-of-type(2){
   max-height: -webkit-fill-available;
    overflow: scroll
}

img{
    max-height: inherit;
}