How to implement position responsive patterns in MDC-Web (material-components-web)?

Question

Tell me please how to use the material-components-web to implement this pattern:

Link on Material.io

Answer 1

Solved this problem as follows:

CSS

.demo-toolbar {
   margin-bottom: -190px;     
}

HTML

<header class="mdc-toolbar demo-toolbar">
  <div class="mdc-toolbar__row">
    <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
      <a href="#" class="material-icons">menu</a>
      <span class="mdc-toolbar__title">Title</span>
    </section>
  <div class="mdc-toolbar__row"> </div>
  <div class="mdc-toolbar__row"> </div>
  <div class="mdc-toolbar__row"> </div>
</header>

https://codepen.io/anon/pen/jmwgjQ