css - Bootstrap Grid columns vertical aligment inside row

Question

I have the following structure:

When I add "h-100" or "align-self-stretch" to give a "height: 100%" to the inner row, the columns fill the entire row:

How to achieve the alignment below?

The code:

<div class="row">
    <div class="col-4">
        <img src="assets/img/author-img.jpg" class="video-author-photo img-fluid w-100" alt="...">
    </div>
    <div class="col-8">
        <div class="row h-100">
            <div class="col-12 bg-info">
            </div>
            <div class="col-12 bg-warning">
            </div>
            <div class="col-12 bg-danger">
            </div>
        </div>
    </div>
</div>

Thanks.

question from:https://stackoverflow.com/questions/65886009/bootstrap-grid-columns-vertical-aligment-inside-row

Answer 1

Waitting for answers