Bootstrap 3.0 - Grid System

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
   <div class="card-header">
      <div class="d-flex align-items-center justify-content-between">
          <button data-toggle="collapse" data-target="#collapse-group-task" aria-expanded="false" aria-controls="collapse-group-task">
              <i class="fa fa-eye" aria-hidden="true"></i>
          </button>
      </div>
   </div>

   <div class="card-block">
      <div class="collapse" id="collapse-group-task">
         <div class="list-group">
            <div class="d-flex w-100 justify-content-end custom-d-flex">
               <a data-toggle="collapse" href="#collapse-group-task-1" aria-expanded="false" aria-controls="collapse-group-task-1">
                  <i class="fa fa-comments-o" aria-hidden="true"></i>&#9;<span>Comments</span>
               </a>
            </div>

            <div class="collapse w-100 comment-list-block" id="collapse-group-task-1">
                  ***SOME TEXT***
            </div>
         </div>
      </div>
   </div>

</div>

JavaScript

$(document).ready(function () {
    $('.collapse')
        .on('shown.bs.collapse', function(event) {
          event.stopPropagation();
            $(this)
                .parent().parent()
                .find(".fa-eye")
                .removeClass("fa-eye")
                .addClass("fa-eye-slash");
        }).on('hidden.bs.collapse', function(event) {
         event.stopPropagation();
            $(this)
                .parent().parent()
                .find(".fa-eye-slash")
                .removeClass("fa-eye-slash")
                .addClass("fa-eye");
        });
});