如何使用mdl正确标记？

Question

I want to move this two items

大家好。我想尽可能使用本机mdl样式移动这两个项目。它非常适合标准高度的物品。但是，如果一个人更高，事情会变得疯狂。

以下是html结构示例：

<main class="mdl-layout__content">
  <div class="page-content">
    <div class="mdl-grid">
      <!-- TASKS -->
      <div id="tasks" class="mdl-cell mdl-cell-1-col"></div>
      <!-- FINANCES CARD -->
      <div class="mdl-cell mdl-cell-1-col"></div>
    </div>
  </div>
</main>

Here's CodePen...