How to make a text to stay exactly some px above a center text?
<p>I have an HTML structure like below, where I want the summary to show up right in the center (vertically and horizontally). And the 'just-in-tags' to be exactly 20px above (margin) the summary.</p>

<pre><code>&lt;div class="article-right aligner"&gt;
    &lt;div class="just-in-tags"&gt;
        &lt;span class="article-label tags tags--primary"&gt;Latest Best of the Web&lt;/span&gt; 
    &lt;/div&gt;

    &lt;div class="summary"&gt;
        &lt;h2 class="trending-header-text"&gt;
        &lt;a href="google.com"&gt;Hello World Hello World Hello World&lt;/a&gt;
      &lt;/h2&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I tried to do like shown in this codepen:</p>

<p><a href="http://codepen.io/hellouniverse/pen/LbJoYY" rel="nofollow noreferrer">http://codepen.io/hellouniverse/pen/LbJoYY</a></p>

<p>The CSS I am trying is:</p>

<pre><code>%aligner {
    align-items: center;
    display: flex;
    justify-content: center;
}

.tags {
    text-align: center;
    margin-bottm: 20px;
}

.article-right {
    width: 860px;
    height: 320px;
    background-color: grey;
    @extend %aligner;
    flex-direction: column;
}
</code></pre>

<p>However, everything is centered for me. <strong>I want the text of summary to be centered and the "Latest Best of the Web" to be exactly 20px above text of summary such that the the summary text still stays in the center vertically.</strong> </p>

<p>I am stuck. Any idea how to solve this issue?</p>