<!-- Message -->
<div class="message">
    <div class="message-wrap">
        <div class="message-item">
            <div class="message-content">
                <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugiat eligendi blanditiis enim.</span>
            </div>
            <div class="dropdown align-self-center">
                <button class="btn btn-icon btn-base btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="ri-more-2-fill"></i>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Favorite
                            <i class="ri-star-line"></i>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Share
                            <i class="ri-share-line"></i>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete
                            <i class="ri-delete-bin-line"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="message-info">
        <div class="avatar avatar-sm">
            <img src="assets/img/02.png" alt="Ariel Martinez">
        </div>
        <div>
            <h5 class="mb-0">Ariel Martinez</h5>
            <small class="text-body-secondary">9:15 PM
                <i class="ri-check-double-line align-bottom text-success fs-5"></i>
            </small>
        </div>
    </div>
</div>
<!-- Message -->

<!-- Message -->
<div class="message self">
    <div class="message-wrap">
        <div class="message-item">
            <div class="message-content">
                <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium fugiat eligendi blanditiis enim.</span>
            </div>
            <div class="dropdown align-self-center">
                <button class="btn btn-icon btn-base btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="ri-more-2-fill"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Favorite
                            <i class="ri-star-line"></i>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Share
                            <i class="ri-share-line"></i>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item d-flex align-items-center justify-content-between" href="#">Delete
                            <i class="ri-delete-bin-line"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="message-info">
        <div class="avatar avatar-sm">
            <img src="assets/img/12.png" alt="John Davis">
        </div>
        <div>
            <h5 class="mb-0">John Davis</h5>
            <small class="text-body-secondary">9:26 PM
                <i class="ri-check-double-line align-bottom text-success fs-5"></i>
            </small>
        </div>
    </div>
</div>
<!-- Message -->