Positioning an element in the top right corner of the parent element and ensuring wrapping around it
<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>