components/layout/04-main-with-sidebar/01-main-with-sidebar/main-with-sidebar.html

<div class="mzp-l-content mzp-has-sidebar mzp-l-sidebar-{% if layout %}{{ layout }}{% else %}left{% endif %}">
  {% block content %}
    <main class="mzp-l-main">
      <p>Main content.</p>
      <p>The sidebar comes <strong>after</strong> the main section in the source order.</p>
    </main>

    <aside class="mzp-l-sidebar">
      <p>Sidebar content.</p>
    </aside>
  {% endblock %}
</div>

{% block styles %}
<!-- Inline styles are for demo purposes only. Prefer external stylesheet in production. -->
<style>
  .mzp-l-main {
    border: 4px solid slateblue;
  }

  .mzp-l-sidebar {
    border: 4px solid lightseagreen;
  }
</style>
{% endblock %}