Mi problema es que cuando reduzco la pantalla, las entradas rompen la encapsulación div y no sé por qué. Sé que cometí un gran error al no comenzar primero con el móvil, pero ya sabes, errores de confianza. Cada respuesta sería apreciada.

Aquí está la imagen:

Y aquí está el código:

 function PersonalDataCard() { return( return( <Row justifyContent="space-between" width="80%" border="1px solid black" marginTop="5em" > <VStack gap="1em" width="20em" justifyContent="flex-start" alignItems="center" > <Text textAlign='left' fontSize="1.5rem" fontWeight='500' >Personal Data </Text> <Text textAlign='left' fontSize="1rem" fontWeight='500' >General </Text> <Text>First name*</Text> <Input placeholder="Adam" /> <Text>Last name*</Text> <Input placeholder="Nowotny" /> <Text>Nickname*</Text> <Input placeholder="adam.nowotny" /> <Text>Email*</Text> <Input placeholder="adamnowontky@gmail.com" /> <Text>Password*</Text> <Input type="password" placeholder="whatever" /> <Text>Biographical information*</Text> <TextArea placeholder="adam.nowotny" back /> export default PersonalDataCard;

El código es exactamente el mismo para la otra columna, todos los anchos están definidos en ems excepto para VStack (div: display:'flex', flex-direction:'column') que obtuvo un 80% de ancho.