How to create a Straddling div that overlaps direct sibling div, but does not overlap content

I want to add a "Straddling div", between two other divs in a column layout.

Div 1, Div 2, Div 3.

Diagram

In the above image, scenario on the left, Div1 and Div2 are 'touching'. Just two divs next to each other in the DOM, and they each have internal padding.

In the second scenario, on the right, I want to have a straddling div, that doesn't change that the Div1 and Div3 should be 'touching', but I want to make sure the padding remains consistent, so the content is not being overlapped by the straddling div.

Attempts in this fiddle with CSS selectors, but there are magic numbers that I don't really want, and it didn't get me the solution I wanted anyway.

Is there some nice trick to doing this? Ideally with no magic numbers and not changing the outside siblings properties. This is dynamic content and it could potentially be between any two components.

<div class="container"> <div class="component component-normal"> <div class="label">Normal Component (no special class)</div> <h2>First Component</h2> <p>This component has NO special classes. CSS automatically adds extra bottom padding because the next sibling has class "component-overlap".</p> </div> <div class="component component-overlap"> <div class="label">Overlap Component</div> <h2>Middle Overlap Component</h2> <p>This is the only component that needs the special class! The backgrounds overlap, but content spacing is maintained automatically.</p> </div> <div class="component component-normal"> <div class="label">Normal Component (no special class)</div> <h2>Third Component</h2> <p>This component also has NO special classes. CSS automatically adds extra top padding because the previous sibling has class "component-overlap".</p> </div> </div>

---

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; } .container { max-width: 800px; margin: 40px auto; background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .component { padding: 60px 40px; margin: 0; position: relative; } .component h2 { margin-bottom: 16px; font-size: 24px; } .component p { line-height: 1.6; color: #555; } /* Normal components */ .component-normal { background: #ffffff; border: 2px dashed #e0e0e0; } .component-normal:nth-of-type(1) { background: #fff3e0; border-color: #ffb74d; } .component-normal:nth-of-type(3) { background: #e8f5e9; border-color: #81c784; } .component-overlap { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); width: 85%; margin: -40px auto; padding: 60px 40px; border-radius: 12px; position: relative; z-index: 3; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .component-overlap::before { content: ""; position: absolute; left: 0; right: 0; height: 140px; top: -140px; pointer-events: none; } .component-overlap::after { content: ""; position: absolute; left: 0; right: 0; height: 140px; bottom: -140px; pointer-events: none; } .component-overlap p { color: rgba(255, 255, 255, 0.9); } .label { display: inline-block; background: rgba(0, 0, 0, 0.1); padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; } .component-overlap .label { background: rgba(255, 255, 255, 0.2); } .info { margin-bottom: 30px; padding: 20px; background: #e3f2fd; border-left: 4px solid #2196f3; border-radius: 4px; } .info h3 { margin-bottom: 10px; color: #1565c0; } .info code { background: rgba(0, 0, 0, 0.05); padding: 2px 6px; border-radius: 3px; font-size: 13px; } .info p { margin-bottom: 8px; color: #333; }

https://jsfiddle.net/Lptofsmj/11

Thanks!