Доброго времени суток! Есть следующий код:
<div class="row d-flex justify-content-end">
<div class="col-md-4">
<div class="row d-flex align-items-end">
<div class="col-md-3">
<div class="schedule__img text-left">
<img src="img/это_просто_картинка.png" alt="">
</div>
</div>
<div class="col-md-9">
<div class="schedule__date text-center">
<p class="date">Надпись рядом с картинкой</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-left">
<h3 class="schedule__name">Заголовок следующего списка</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 text-left align-items-center">
<p class="schedule__list">
<span class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</span>
</p>
</div>
</div>
<div class="row d-flex align-items-end">
<div class="col-md-12 d-flex text-left">
<h3 class="schedule__program_per">Примечание: </h3>
<p class="schedule_period">
Текст примечания
</p>
</div>
</div>
</div>
По задумке, рядом должны стоять три колонки (приведена одна), у которых должен быть верх и низ (с одинаковой информацией) на одном уровне, а содержание по середине может изменять свою высоту за счет кол-ва элементов списка.
Как можно решить данное? Если возможно, то средствами бутстрап, если нет, то css/
Заранее спасибо за ответы!
Дополнение:
Как сделать, чтобы желтый блок всегда был прилеплен к низу родительского блока?
<div class="container">
<div class="row one">
<div class="col-12">
<div class="row">
<div class="col-4">
<div class="row">
<div class="col-12 inside"></div>
</div>
<div class="row">
<div class="col-12 inside2"></div>
</div>
<div class="row">
<div class="col-12 inside3"></div>
</div>
</div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
</div>
</div>
</div>
Средний
