title: Box shadow on adjacent elements with variable width
body: <p>I'm trying to add a box shadow on two elements, each with variable width. My desired result looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/WY4zO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WY4zO.png" alt="screenshot"></a></p>
  
  <p>I've been trying to get to this result with a pseudo element covering the overlapping box shadows, but because they need to have transparency, I can't seem to find a solution in which there are neither small overlaps at the edges of the boxes nor the pseudo element adjusts to the correct width.
  The top box does also not necessarily need a top border to solve my problem.</p>
  
  <p><a href="http://jsfiddle.net/Matze/5ymdL3uo/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div&gt;
      &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>div {
      display: inline-block;
      margin: 75px;
      width: 200px;
      height: 50px;
      position: relative;
      p {
          position: absolute;
          top: 100%;
          left: 0;
          height: 300px;
          width: 250px;
      }
      &amp;, p {
          background: #ededed;
      }
  }
  div:last-child p {
      width: 150px
  }
  
  div {
      box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
      p {
          box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);
      }    
  }
  </code></pre>
  
  <hr>
  
  <p><strong>Edit:</strong></p>
  
  <p>Normally I wouldn't consider JS for layout but since in my particular case the boxes won't be visible until a user interaction occurs, I've used a script to solve my problem.
  The script figures out if the top element is bigger than the bottom one when the dom is ready and adds a "big" or "small" class to it respectively. By knowing that, we know which element the pseudo-element's width should inherit. As long as the elements don't get resized in a way that would change which element is bigger, this works fine.</p>
  
  <p>There is also a much cleaner solution without the need for JS and one pseudo element less in case one only needs box-sizing blur and no spread.</p>
  
  <p>Fiddles:</p>
  
  <p><a href="https://jsfiddle.net/Matze/5ymdL3uo/4/" rel="nofollow noreferrer">Blur and spread combined (JS)</a>, </p>
  
  <p><a href="https://jsfiddle.net/Matze/5ymdL3uo/5/" rel="nofollow noreferrer">Only blur, no spread (No JS)</a></p>
  
  <p>The end result is not quite <em>perfect</em> as you can see in this screenshot where all the white background is replaced with black:</p>
  
  <p><a href="https://i.stack.imgur.com/8lcz8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8lcz8.jpg" alt="Screenshot"></a></p>
  
  <p>When you look at the left box's top left, you can see that the border shadow has a slight curve.
  Anyway, it's close enough to me.</p>
  
  <p>If someone finds a solution with a similar result as in the first fiddle using only css, I would really appreciate it.</p>