Is there a way to attach a dismiss button to the left of a contact in a sidebar? I am trying to achieve a layout similar to the one shown in this image: https://i.sstatic.net/jJE3h.png
I attempted using margin-left: -50px; or left: -50px;, but the dismiss div seems to disappear. Even though its position looks correct when inspecting the element, it doesn't display as expected (a purple square).
You can view the complete demo here: https://codepen.io/anon/pen/YbpZaV
HTML
<nav class="sidebar">
<div class="dismiss">dismiss</div>
<div class="contacts">
</nav>
CSS
.sidebar {
width: 250px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
overflow-y: auto;
transition: all 0.3s;
z-index: 40;
}
.dismiss {
width: 50px;
height: 50px;
background-color: #7386d5;
position: absolute;
top: 50%;
margin-left: -50px;
cursor: pointer;
transition: all 0.3s;
z-index: 40;
}