Tengo una ventana emergente donde muestro notificaciones. El usuario puede eliminar las notificaciones en cualquier momento. El día que llega la notificación y el botón de eliminar aparecerán uno tras otro. No importa lo que hice, no pude.

¿Cómo puedo mostrar estos dos div uno debajo del otro, como se puede ver en el área marcada en la imagen?

 <div className="notificationlist__container only-desktop"> {props.notification.notificationList.map((e) => { return ( <div className="notificationlist__item"> <div className="notificationlist__info"> <div className="notificationlist__content"> Lorem, ipsum. </div> <div className="notificationlist__detail"> <Link to="/profil"> <div>Profile</div> <AS.KeyboardArrowRightIcon /> </Link> </div> </div> <div className="notificationlist__time">Today <div className="delete__button"> <AS.IconButton > <AS.DeleteIcon /> </AS.IconButton> </div> </div> </div> ); })} </div>

 .notificationlist__container.only-desktop { font-size: 1.2rem; // padding-right: 2em; max-height: 400px; overflow: auto; .notificationlist__item { padding: 0.5em 0; border-bottom: 1px solid #d1d1d1; &:last-of-type { border-bottom: none; } display: flex; justify-content: space-between; align-items: flex-start; .notificationlist__info { margin-right: 1em; max-width: 400px; .notificationlist__content { color: gray; } .notificationlist__detail { margin-top: 1em; color: var(--palette-blue-300); display: flex; align-items: center; font-size: 1.1rem; font-weight: 600; svg { font-size: 1.5rem !important; } a { display: contents; } } } .notificationlist__time{ display: flex; .delete__button { float: left; } } } }