html - コンテンツを左に押すと、削除ボタンが表示されます

Question

どうすればそれを行うことができますか。

これは私の現在のウィップです：

https://jsfiddle.net/Lg0wyt9u/967/

   <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>

削除ボタンは一時的に非表示になっています。

起こるべきことは、それが明らかになり、他のコンテンツがこの要素と同じ幅に「キャンバス外」に押し出されることです。しかし、私はどのように進むべきかわかりません。私は display:flex を使用して配置を試みましたが、うまくいきませんでした。