title: Flexbox center and bottom right item
body: <p>I'm trying to achieve the following result using flexbox:
  <a href="https://i.stack.imgur.com/r4AVy.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/r4AVy.jpg" alt="Flexbox demo"></a></p>
  
  <p>I tried the with the following html but I can't get it to work.</p>
  
  <pre><code>&lt;div class=" flex-center"&gt;
      &lt;div class="flex-item-center"&gt;
          &lt;p&gt;
              Some text in box A
          &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="flex-item-bottom"&gt;
          &lt;p&gt;Some text in box B....&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>.flex-center {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
  }
  .flex-item-center {
    align-self: center;
  }
  
  .flex-item-bottom {
    align-self: flex-end;
  }
  </code></pre>
  
  <p>How can I make it look like the image?</p>