<div class="students-list">
  <div class="student-item" data-id="1">
    <div class="student-item__info student">
      <img src="https://dummyimage.com/256x256/ffb700/000000" alt="" class="student__avatar">
      <p class="student__name">Lorem, ipsum dolor.</p>
      <p class="student__description">Lorem ipsum, dolor sit amet consectetur adipisicing, elit.</p>
    </div>
    <div class="student-item__management actions">
      <button class="action-button" type="button" data-action="edit">Edit</button>
      <button class="action-button" type="button" data-action="delete">Delete</button>
    </div>
  </div>
  <div class="student-item" data-id="2">
    <div class="student-item__info student">
      <img src="" alt="" class="student__avatar">
      <p class="student__name">Veniam, corrupti, quo!</p>
      <p class="student__description">Perferendis, aliquid! Sed fugiat voluptates dolor velit. Ratione?</p>
    </div>
    <div class="student-item__management actions">
      <button class="action-button" type="button" data-action="edit">Edit</button>
      <button class="action-button" type="button" data-action="delete">Delete</button>
    </div>
  </div>
  <div class="student-item" data-id="3">
    <div class="student-item__info student">
      <img src="" alt="" class="student__avatar">
      <p class="student__name">Deleniti, nesciunt, dignissimos!</p>
      <p class="student__description">Maiores quod iusto ullam harum accusamus quas possimus?</p>
    </div>
    <div class="student-item__management actions">
      <button class="action-button" type="button" data-action="edit">Edit</button>
      <button class="action-button" type="button" data-action="delete">Delete</button>
    </div>
  </div>
</div>

<!-- .students-list>.student-item[data-id="$"]*3>(.student-item__info.student>img.student__avatar+(p.student__name>lorem3)+(p.student__description>lorem8))+(.student-item__management.actions>button.action-button[type="button" data-action="edit"]{Edit}+button.action-button[type="button" data-action="delete"]{Delete}) -->

body {
    margin: 0;
    font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
}

.students-list {
    padding: 24px;
    gap: 24px;
    display: grid;
    grid-auto-rows: max-content;
}

.student-item {
    background: #dddddd;
    display: flex;
    justify-content: space-between;
    
    &__info,
    &__management {
        padding: 16px;
    }
    
    &__info {
        flex: 1 1 auto;
    }
}

.student {
    gap: 12px;
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: max-content max-content;
    
    &__avatar {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        grid-column: 1 / 2;
        grid-row: 1 / -1;
        display: block;
        
        &[src=""] {
            visibility: hidden;
        }
    }
    
    &__name {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: #222222;
    }
    
    &__description {
        margin: 0;
        color: #666666;
    }
}

.actions {
    gap: 16px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
}

.action-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: inherit;
    background: #333333;
    color: #ffffff;
}

const actions = {
    edit: (id) => {
        alert(`Edit ${id} student`);
    },
    delete: (id, card) => {
        alert(`Delete ${id} student`)
        card.remove();
    }
};

document.addEventListener('click', event => {
    const button = event.target.closest('.action-button');
    if (button !== null) {
        const card = event.target.closest('.student-item');
        const { id } = card.dataset;
        const { action } = button.dataset;
        
        if (action in actions) {
            actions[action](id, card, button);
        }
    }
});