Change responsive div display
<p>At the moment, I have 3 simple block : a big black one, next to him a smaller pink one, and a green one under the pink.
What I want, when resizing, is the pink block and the green one are on the same line.
<a href="https://i.stack.imgur.com/rSHSs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rSHSs.jpg" alt="enter image description here"></a></p>

<p>The pink and green blocks are wrapped in a div, but I can't go any further :s
Any help? </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-html lang-html prettyprint-override"><code>&lt;div id="BLACK" style="background:#000;width:400px; height:500px;display:inline-block"&gt;&lt;/div&gt;
&lt;div id="WRAPPER" style="display:inline-block;"&gt;
  &lt;div id="PINK" style="background: #f0c; width:200px; height:250px; display:block"&gt;&lt;/div&gt;
  &lt;div id="GREEN " style="background: #0f0; width:200px; height:250px; display:block"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://jsfiddle.net/90pftg24/" rel="nofollow noreferrer">Fiddle of actual code</a></p>