Push content to the left to reveal delete button

How would I go about doing that;

this is my current wip:

   <li>
      <div class='type'><i class='fa fa-arrow-circle-right'>I</i></div>
      <div class='details'>
        <div class='date'>date</div>
        <div class='address'>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
       </div>
       <div class='value'>1.2</div>   
     <div class='slide-in'>
       DELETE
     </div>
   </li>

The delete button is hidden for the moment.

What should happen is, it gets revealed, and the other content is pushed "off-canvas" to the same width as this element. However, I'm unsure of how to proceed. I use display:flex and tried some positioning but it didn't work.

Solution

Here you go:-

$(document).ready(function(){
  $('.list ul li .rw').click(function(){
    	console.log(this);
      $(this).css("right","65px");
      $('.slide-in').css("display","block");
  })
})

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

.rw{
  padding-top: 20px;
  width:100%;
  cursor:pointer;
  position:absolute;
  padding-bottom: 20px;
  border-bottom: 1px solid #a1d1b8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.type {
  padding-right: 15px;
  flex: 0 0 50px;
  background: green;
}

.type i {
  font-size: 40px;
}

.details {
  flex: 1;
  overflow: hidden;
  font-family: "Courier New";
}

.address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.value {
  padding-left: 15px;
  font-size: 55px;
}

.date {
  font-weight: bold;
  margin-bottom: 5px;
}
.slide-in {
  width:65px;
  background: red;
  color: #fff;
  display:none;
}

<div id="container">
  <div class="list">
     <ul>
       <li>
       <div class="rw">
          <div class='type'><i class='fa fa-arrow-circle-right'>I</i></div>
          <div class='details'>
            <div class='date'>date</div>
            <div class='address'>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
           </div>
           <div class='value'>1.2</div>
            <div class='slide-in'>
           DELETE
         </div>
           </div>
        
             
       
       </li>
     </ul>
  </div>
</div>

You have include jQuery for this solution...