title: Making a node appear after its siblings using CSS
body: <p>Given makup that looks like this:</p>
  
  <pre><code>&lt;div&gt;
      &lt;span&gt; a &lt;/span&gt;
      &lt;span class="oddOneOut"&gt; [XYZ] &lt;/span&gt;
      &lt;span&gt; b &lt;/span&gt;
      &lt;span&gt; c &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to, using just CSS, force the [XYZ] node to always appear as the last item, on the bottom right, like in the following examples?</p>
  
  <pre><code>+--------------+
  | a b c  [XYZ] |
  +--------------+
  
  +--------------+
  | a b c d e f g|
  | h i    [XYZ] |
  +--------------+
  </code></pre>
  
  <hr>
  
  <p>If there is no straightfoward solution I would also be interested in other ways to achieve the same effect</p>