title: Wrap all children if children can't be displayed side-by-side using CSS
body: <p>I'd like to display multiple choice buttons side-by-side if its possible given the screen real estate, ie.<br>
  <code>MC1 MC2 MC3 MC4</code></p>
  
  <p>but if it isn't possible and at least one element has to wrap, they should ALL be wrapped </p>
  
  <pre><code>MC1  
  MC2  
  MC3  
  MC4
  </code></pre>
  
  <p>instead of 
  <code>MC1 MC2 MC3<br>
  MC4</code></p>
  
  <p>The reason I want this unusual behaviour: We often have a number of choices in our psychological surveys where it is important that the end points of a rating scale are visually distant from each other to emphasise that they are different ends of a scale. We prefer to have a horizontal layout where possible, but if the last element wraps, it means the two end points are close together.</p>
  
  <p>The survey layout is fluid and of course the children's widths are unknown. The children usually contain just text. They may contain images, but if someone thinks a solution counting characters and using <code>width:32ex</code> is actually viable, that's better than nothing (ie JS reflows).</p>
  
  <p>I know I could easily do this with JS, but I was wondering whether there is a trick I don't know about to do this only with CSS.</p>