Как вставить пробелы между строкой сетки

Question

Мне нужно сделать сетку, подобную той, которая изображена на картинке: https://imgur.com/MbR8qHw

Я пробовал этот способ, но не работает:

<div class="container" style="  padding-right: 0;">
    <div class="row" style="height: 500px; background: white;">
        <div class="col-3">
            <div class="row row-before" style="border-left: 10px solid red">
                <div class="col">
                    <div>
                        <h5>Title</h5>
                        <img src="https://via.placeholder.com/300x300" alt="">
                        <p>Something as a text</p>
                    </div>
                </div>
                <div class="col">
                    <div>
                        <h5>Title</h5>
                        <img src="https://via.placeholder.com/300x300" alt="">
                        <p>Something as a text</p>
                    </div>
                </div>
                <div class="col">
                    <div>
                        <h5>Title</h5>
                        <img src="https://via.placeholder.com/300x300" alt="">
                        <p>Something as a text</p>
                    </div>
                </div>
            </div>
            <div class="w-100">abcdefg</div>
        </div>
        <div class="col-3">
            <div class="row row-before" style="border-left: 10px solid red">
                <div class="col">
                    <div>
                        <h5>Title</h5>
                        <img src="https://via.placeholder.com/300x300" alt="">
                        <p>Something as a text</p>
                    </div>
                </div>
                <div class="col">
                    <div>
                        <h5>Title</h5>
                        <img src="https://via.placeholder.com/300x300" alt="">
                        <p>Something as a text</p>
                    </div>
                </div>
                <div class="col">
                    <div>
                        <h5>Title</h5>
                        <img src="https://via.placeholder.com/300x300" alt="">
                        <p>Something as a text</p>
                    </div>
                </div>
            </div>
            <div class="w-100">abcdefg</div>
        </div>
        <div class="col-1" style="background: #CEC8B8;"></div>
    </div>
</div>

Как вы можетевидите, последний столбец, который должен иметь фон и не прерываться, не растягивается до вершины. Как я могу это сделать?

Я пытался использовать также загрузочные миксины сетки, но я не достиг того, что хотел.