Utilizing flex layouts can greatly simplify the process of organizing page layouts once you have a good grasp on them. I highly suggest incorporating Angular-flex to streamline styling and improve readability.
To provide an example, I have created a layout using Angular-flex directives for faster implementation. Since the specifics of your components are unclear aside from app-course-sidebar, I have used placeholders in this demonstration.
<div class="bg-gray-600" fxLayout="column" fxLayoutAlign="start stretch">
<div>
<app-course-info-home></app-course-info-home>
</div>
<div fxLayout="row" fxLayoutAlign="stretch start">
<div class="bg-yellow-200" id="course-sidebar">
<app-course-sidebar></app-course-sidebar>
</div>
<div fxFlex class="bg-blue-500" id="module-display">
<app-module-display></app-module-display>
</div>
</div>
</div>
This layout is designed to resemble the following structure:
------------------------------------
[course info]
[sidebar] [-----module display-----]
------------------------------------
The most significant adjustment made is the positioning of the sidebar within the template. Without specific ordering in row layouts, elements are displayed from left to right sequentially. Therefore, if you want the sidebar on the left, place it as the first child element.
The root div uses a column layout, causing the course info div to appear above the grouping div.
The grouping div follows a row layout, resulting in the sidebar and module display child divs being positioned next to each other.
To control the width distribution, the module display div utilizes fxFlex to occupy available space, potentially pushing the sidebar to the left (adjust the min-width of the sidebar for better spacing if necessary).