title: How to make two items align to the end in flexbox
body: <p>I want to implement a component like the image below. The behavior of the button should always align to the end of right most inner container even when the inner container wraps as window size gets small. The inner container should always align to the left so adding align-self: flex-end; for inner container is not the correct way. I ran out of idea about this. Please help! Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    flex-direction: column;
  }
  
  .btn {
    display: flex;
    align-self: flex-end;
  }
  
  .inner-container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .inner-container&gt;div {
    margin-right: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;button type="button" class="btn"&gt;Click Me!&lt;/button&gt;
    &lt;div class="inner-container"&gt;
      &lt;div&gt;aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa(sample content in inner container)&lt;/div&gt;
      &lt;div&gt;bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb(sample content in inner container)&lt;/div&gt;
      &lt;div&gt;cccccccccccccccccccccccccccccccccccccc(sample content in inner container)&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/anon/pen/WVXoNW" rel="nofollow noreferrer">https://codepen.io/anon/pen/WVXoNW</a></p>
  
  <p><a href="https://i.stack.imgur.com/4BJjw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4BJjw.png" alt="enter image description here"></a></p>