title: Add vertical and horizontal separators between inline elements
body: <p>There are multiple inline elements in one container:</p>
  
  <pre><code>&lt;p&gt;
    &lt;span&gt;Lorem&lt;/span&gt;
    &lt;span&gt;ipsum&lt;/span&gt;
    &lt;span&gt;dolor&lt;/span&gt;
    &lt;span&gt;sit&lt;/span&gt;
    &lt;span&gt;amet&lt;/span&gt;
    &lt;span&gt;consecutetur&lt;/span&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>What I need is a vertical separator between the elements that are in the same row and a horizontal separator between the lines. How does this work in CSS?</p>
  
  <p><img src="https://i.stack.imgur.com/l49Xb.png" alt="how it should look like"></p>