Tengo un div llamado a-text-box. Y quiero mostrar una flecha después de una sección. tengo 4 secciones Sección = 2 palabras. Pero cuando configuro un ancho para mi cuadro de texto, la flecha desaparece. Realmente no sé cómo solucionarlo. La flecha se supone que debe mostrarse después de 'Jonathan'.

JSX:

 return ( <Transitions> <div className={styles.about}> <h1>Who am I?</h1> <div className={styles["a-container"]}> <Undraw1 class={styles.svg} /> <div className={styles["a-text__box"]}> <Element text="Name" text2="Jonathan" /> <BsFillArrowRightCircleFill className={styles.arrow} /> <Element text="Age" text2="18" /> <Element text="Nationality" text2="Brazilian" /> <Element text="Experience" text2="Junior" /> </div> </div> <Btn name="Details" class={styles.btn} /> </div> </Transitions> );

CSS:

 @media (max-width: 992px) { .a-container { width:90%; .svg{ transform:scale(0.8); } .a-text__box { width:40%; display: flex; background-color: var(--primary-color); border-radius: 27px; align-items: center; overflow: scroll; div { margin-inline: 20%; align-items:center; font-size: 2rem; display: flex; flex-direction: column; .arrowRight { display: none; } .space { display: none; } } .arrow { display: block; } } } }