CSS em React: Componente sumindo ao usar position absolute

[Rafael_Victor]

Falaa pessoal, boa tarde!

Seguinte, estou com um problema relacionado ao meu css e não estou conseguindo resolver.
O problema ocorre pois em uma < ul > eu tenho 3 ícones de botão(aceitar, cancelar e editar), quero colocar esses 3 botões ao lado direito superior de cada < ul >, mas quando coloco position: absolute; ele some com 2 botões ficando apenas com o botao de cancelar, quando troco o position para relative ele aparece os 3 botões mas fica la em baixo. Alguém pode me dar uma força? Segue o código abaixo…

CSS

.profile-container ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 24px;
list-style: none;

}

.profile-container ul li {
background: #FFF;
padding: 24px;
border-radius: 8px;
position: relative;
}

.profile-container ul li button {
display: inline-block;
position: relative;
right: 24px;
top: 24px;
border: 0;
}

Front

return (
    <div className="profile-container">
        <header>
            <img src={schoolIso} alt="school Isotipo" />
            <span>Bem vindo, {nameSchool}</span>

            <Link className="button" to="/">Eventos</Link>
            <button onClick={handleLogout} type="button">
                <FiPower size={18} color="#E02041" />
            </button>
        </header>

        <Tabs className="menu" >
            <Tab className="tab" label="Meus Dados" />
            <Tab className="tab" label="Professores" />
            <Tab className="tab" label="Cursos" />
            <Tab className="tab" label="Dashboard" />
            <Tab className="tab" label="Suporte" />
        </Tabs>

        <h1>Meus Dados</h1>
        <h1>Endereço</h1>
        <ul>
            {schools.map(school => (
                <li key={school.idSchool} >

                    <strong>Nome da Instituição:</strong>
                    <p contenteditable="true">{school.nameSchool}</p>

                    <strong>CNPJ:</strong>
                    <p>{school.cnpj}</p>

                    <strong>Email:</strong>
                    <p>{school.emailSchool}</p>

                    <strong>Whatsapp:</strong>
                    <p>{school.whatsappSchool}</p>

                    <button type="button">
                        <FaEdit size={20} color="#a8a8b3" />
                    </button>
                    <button type="button">
                        <BiCheck size={20} color="#a8a8b3" />
                    </button>
                    <button type="button">
                        <BiX size={20} color="#a8a8b3" />
                    </button>
                </li>
            ))}
            {schools.map(school => (
                <li key={school.idAdress}>

                    <strong>Bairro:</strong>
                    <p>{school.district}</p>

                    <strong>Rua:</strong>
                    <p>{school.street}</p>

                    <strong>Número:</strong>
                    <p>{school.number}</p>

                    <strong>Complemento:</strong>
                    <p>{school.complement}</p>

                    <strong>CEP:</strong>
                    <p>{school.cep}</p>

                    <button type="button">
                        <FaEdit size={20} color="#a8a8b3" />
                    </button>
                    <button type="button">
                        <BiCheck size={20} color="#a8a8b3" />
                    </button>
                    <button type="button">
                        <BiX size={20} color="#a8a8b3" />
                    </button>
                </li>
            ))}
        </ul>
    </div>
);

Resultado com position: relative;

Resultado com position: absolute;