title: box shadows on multiple elements at same level but without overlap?
body: <p>I want to create something like the following screenshot, but I can't figure out any z-index value for which the shadow doesn't appear either over the first or second box (they are always stacked either with the first one on top, or the second).
  <a href="https://i.stack.imgur.com/1AoWT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1AoWT.png" alt="Overlapping boxes"></a></p>
  
  <p>Is there a way to achieve the following?</p>
  
  <p><a href="https://i.stack.imgur.com/mKzAA.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mKzAA.png" alt="Desired - no overlap"></a></p>
  
  <pre><code>body { background: darkgrey; padding-top: 50px}
  div { background: white; width: 200px; height: 200px; box-shadow: 0 0 20px 
  black; margin: auto; position: relative; }
  #box-one { left: -50px; z-index: 1; }
  #box-two { right: -50px; z-index: 1; }
  </code></pre>
  
  <p><a href="https://codepen.io/eoghanmurray/pen/oVEEVK" rel="noreferrer">https://codepen.io/eoghanmurray/pen/oVEEVK</a></p>