Как сверстать эти столбцы с bootstrap или обычным css?

Question

[Konstantin]

https://imgur.com/a/v7W8B
Есть зелёный блок, который представляет расширяющийся по нажатью список. Работает через ajax. Когда она раскрывается слева создается просто свободное пространство между красным и синим блоком. Подскажите как сверстать так, чтобы красный блок был всегда прижат к низу синего? Спасибо

Answer 1

[I'm Yoda]

Например так:

.blue, .red, .green, .grey, .yellow {height: 150px;}
    .blue {background: blue;}
    .red {background: red;}
    .green {background: green; height: 300px;}
    .grey {background: grey;}
    .yellow {background: yellow;}

<div class="container-fluid">
        <div class="row">
            <div class="col-sm-8">
                <div class="row">
                    <div class="col-sm-12 blue">синий блок</div>
                    <div class="clearfix"></div>
                    <div class="col-sm-12 red">красный блок</div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="col-sm-12 green">зеленый блок</div>
                <div class="clearfix"></div>
                <div class="col-sm-12 grey">серый блок</div>  
                <div class="clearfix"></div>
                <div class="col-sm-12 yellow">желтый блок</div>  
            </div>
        </div>
    </div>

Answer 2

[Котик Антон]

Сделайте две колонки: в левой колонке будут красный и синий блоки, правой — все остальные. Тогда при растяжении зеленый блок не будет влиять на левую колонку. Сейчас вы верстали строками поэтому зеленый блок расширяет свою строку, а нужно сверстать колонками.