title: Positioning an element in the top right corner of the parent element and ensuring wrapping around it
body: <p>I would like to create a container for an arbitrary number of elements, with an expand/collapse button. The button should be in the top right corner of the container, and the elements inside the container should wrap around the button. Here's the idea:</p>
  
  <p><a href="https://i.stack.imgur.com/ivS5M.png" rel="nofollow"><img src="https://i.stack.imgur.com/ivS5M.png" alt="enter image description here"></a></p>
  
  <p>I made a quick <a href="http://codepen.io/azangru/pen/mAjkGX" rel="nofollow">Codepen prototype</a> of this element, but the only way I could come up with to position the button in the top right corner was <code>float: right</code>:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="container closed"&gt;
    &lt;button&gt;Click&lt;/button&gt;
    &lt;!-- some divs with class "child" inserted with js --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.container {
    height: 80px;
    width: 330px;
    margin: auto;
  }
  
  button {
    float: right;
    margin: 1.3em 1.6em 0 0;
  }
  
  .closed {
    overflow-y: hidden;
  }
  
  .child {
    width: 50px;
    height: 30px;
    background-color: grey;
    display: inline-block;
    margin: 1em;
  }
  </code></pre>
  
  <p>So this seems to work with <code>float: right</code> but floats are so passé :-) Is there a cleaner way of positioning the button? I thought flexbox would be able to do it, but couldn't figure out a way of achieving this with flexbox. Any advice?</p>
  
  <p><strong>UPD:</strong> Added the relevant html and css code.</p>