How to set the icons to the bottom of each card that must be present inside the card ,for my case it's overflow and crossing the some of cards?

Question

when onclick functionality happens on the CLOSE button it generates some cards ,each card contains some icons at the bottom that needs to be fixed position(perfectly adjustable for every card) that means left side of the card icons available with some proper spacing in the right side of a card close button available that must be equals to the icons ,for my case some of the card-icons are overlapped or crossing the cards, i am trying different different possibilities but still it's not working please help me to fix this issue Here my output images some card-icons are crossing the card.Thanks in advance..!

[DisplayNotes.vue]
<template>
<div class="main-section">
    <div v-for="note in notes" :key="note.data" class="container">
        <div class="card-content">
            <h4>{{note.title}}</h4>
            <p><i>{{note.body}}</i></p>
        </div>
        <div @mouseover="hover=true" @mouseleave="hover=false" class="import-icons">
            <div class="used-icons">
    <i id="first-icon" class="fas fa-bell"></i>
    <i id="third-icon" class="fas fa-palette"></i>
    <i id="forth-icon" class="fas fa-archive"></i>
    <i id="fifth-icon" class="fas fa-ellipsis-v"></i>
</div>
            <button type="button" @click="handlesubmit()">close</button>
        </div>
    </div>
</div>
</template>

<script>

import axios from 'axios'
export default {
    components: {
       
    },
    data() {
        return {
            hover: false,
            notes: [{
                id: 1,
                title: 'Fundoo',
                body: 'unlimited Notes...'
            }, ],
        }
    },
    methods: {
        async handlesubmit() {
            const response = await axios.get('/displayNotes', {});
            localStorage.getItem('token', response.data.token);
          
        },
    }
}
</script>

<style >
/* .container:hover {
 border-style: ridge;
 } */
.card-content input {
  border: none;
}
.card-content textarea {
  border: none;
  outline: none;
}
.container {
  height: 200px;
  width: 380px;
  display: flex;
  margin-top: 5%;
  border-style: ridge;
}
.import-icons {
  display: block;
  margin-left: -18%;
  padding-top: 35%;
}
.import-icons button {
    /* position: relative; */
    display:flex;
    align-items: flex-start;
    position: relative;
  border: none;
  background: none;
  float: right;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: -20px;
  padding-left: 250px;
}
.used-icons {
    display: flex;
    /* justify-content:space-around; */
    align-items: flex-end;
    margin-top: 40px;
    position: relative;
    /* position:fixed; 
  margin-left:-40px; */
}

#first-icon,
#third-icon,
#forth-icon,
#fifth-icon {
    opacity: 0.9;
}

#third-icon {
    padding-left: 30px;
    padding-right: 30px;
}

#fifth-icon {
    margin-left: 30px;
}

</style>

Answer 1

Put the icons in their own div within the parent div, then you can set a max size on the new div so it changes size accordingly within the parent div. You might have to experiment a bit with display: flex to get things looking right, but this should be a start!