title: CSS margin-bottom if elements can't be displayed next to each other
body: <p>How can I detect if elements are displayed in a row, or if there's a line break and then apply additional styling?</p>
  
  <p>In this case both buttons fit in one row:</p>
  
  <pre><code>&lt;div style="width: 200px"&gt;
    &lt;button&gt;small&lt;/button&gt;
    &lt;button&gt;small&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this case they display above each other:</p>
  
  <pre><code>&lt;div style="width: 200px"&gt;
    &lt;button&gt;very very very long element&lt;/button&gt;
    &lt;button&gt;small&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And in this case I'd like to automagically add <code>margin-bottom: 16px</code> to the first button (or <code>margin-top</code> to the second one - doesn't matter).</p>