Я хочу отображать рядом контент из упомянутых компонентов, app-shopping-list и app-recipe-list.
Но я получаю этот результат.

<div class="row">
<div class="col-md-7">
<app-shopping-list></app-shopping-list>
</div>
<div class="col-md-5">
<app-recipe-list></app-recipe-list>
</div>
</div>