<div class="card">
  <div class="card-header bg-none fw-bold d-flex align-items-center">Discussion group <a href="#" class="ms-auto text-muted text-decoration-none" data-toggle="card-expand"><i class="fa fa-expand"></i></a></div>
  <div class="card-body h-200px" data-scrollbar="true">
    <div class="widget-chat">
      <div class="widget-chat-item">
        <div class="widget-chat-media"><img src="assets/img/user/user-2.jpg" alt=""></div>
        <div class="widget-chat-content">
          <div class="widget-chat-name">Roberto Lambert</div>
          <div class="widget-chat-message last">
            Hey, I'm testing out group messaging.
          </div>
        </div>
      </div>
      <div class="widget-chat-item reply">
        <div class="widget-chat-content">
          <div class="widget-chat-message last">
            Cool
          </div>
          <div class="widget-chat-status"><b>Read</b> 16:26</div>
        </div>
      </div>
      ...
    </div>
  </div>
  <div class="card-footer bg-none">
    <div class="input-group">
      <input type="text" class="form-control border-end-0 rounded-pill rounded-end-0 ps-3" placeholder="Write something...">
      <div class="input-group-text bg-none p-3px rounded-pill rounded-start-0">
        <button class="btn btn-gray-500 w-80px fs-12px fw-semibold rounded-pill py-4px px-3" type="button">Send</button>
      </div>
    </div>
  </div>
</div>