My problem is that when I downsize the screen the inputs break the div encapsulation and I don't know why. I know I committed a big mistake that is not starting for mobile first, but you know, confidence mistakes. Every answer would be appreciated.

Here is the image:

And here is the code:

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;

The code is exactly the same for the other Column all width are defined in ems except for the VStack (div: display:'flex', flex-direction:'column') which got a 80% width.