title: Slick slider table-cell negative margin
body: <p>This is quite a niche issue, but here goes....</p>
  
  <p>I'm using slick slider and have put together a nested vertical carousel with slider syncing which works great.
  I only have 1 CSS issue I just can't resolve.</p>
  
  <p>My vertical slider controls are on the left hand side and the content on the right.
  I've used <code>display:table-cell</code> on the vertical controls and content so they appear side by side. All working well so far!</p>
  
  <p>I want to add a triangle to the right of the control, which means I need to add a negative left margin to the content area.
  This is where I have a problem....it seems <code>display: table-cell</code> ignores the left margin.</p>
  
  <p>The image below is what I have - notice the gap between the edge of the control and the border of the content. This is what I'm trying to close up
  <a href="https://i.stack.imgur.com/PpBR3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PpBR3.png" alt="enter image description here"></a></p>
  
  <p>The image below is what I'm after - no gap between control and content border
  <a href="https://i.stack.imgur.com/xhLDu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xhLDu.png" alt="enter image description here"></a></p>
  
  <p>This is the fiddle I've created <a href="https://jsfiddle.net/damiantaylor/njds51yh/220/" rel="nofollow noreferrer">https://jsfiddle.net/damiantaylor/njds51yh/220/</a></p>
  
  <p>Is it possible to fix this issue?</p>
  
  <p><strong>EDIT</strong> I have tried changing the <code>display:table-cell</code> to <code>display:inline-block</code> but Slick seems to calculate the width of the content container incorrectly when I do that</p>