Form tag breaks document layout

Question

Using React with Chakra UI. Found, that default <form> tag breaks layout. Adding and deleting <form> shows that only it affects layout. Components inside <form> appears like they are in <Flex flexDir='column'> tag. I need components inside <form> in a row direction.

My jsx code and component layout screenshots (in Chakra UI we write inline css). Component layout with <form> tag

        <Flex id='Send section' borderColor='gray.200' width='100%' height='20%'  padding='20px'>
            <form onSubmit={handleSubmit(onSubmit)}>
                <FormControl isInvalid={Boolean(errors.text)}>
                    <Textarea 
                        borderRadius='10px' 
                        height='100%'
                        {...register('text', textValidator)}
                    />
                    {errors.text && <FormErrorMessage>{errors.text.message}</FormErrorMessage>}
                </FormControl>
                <Flex flexDir='column' justifyContent='end' ml='1dvh'>
                    <IconButton
                        borderRadius='10px'
                        variant='outline'
                        colorScheme='blue'
                        aria-label='Attach files'
                        mb='1dvh'
                        icon={<BiPaperclip />}
                    /> 
                    <IconButton
                        type="submit"
                        borderRadius='10px'
                        variant='outline'
                        colorScheme='blue'
                        aria-label='Send message'
                        icon={<BiSend />}
                    />
                </Flex> 
            </form>
        </Flex>

If i delete this tag everything will be fine.

Component layout without <form> tag

I also tried <form style={{width: '100%', flexDirection: 'row'}}> , and now I have full width, but my buttons are still below the <Textarea>.

Layout with <form style={{width: '100%', flexDirection: 'row'}}>

Answer 1

Passing style={{width: '100%', display: 'flex'}} into <form> helped!

Code:

<Flex
  id="Send section"
  borderColor="gray.200"
  width="100%"
  height="20%"
  padding="20px"
>
  <form
    onSubmit={handleSubmit(onSubmit)}
    style={{ width: "100%", display: "flex" }}
  >
    <FormControl isInvalid={Boolean(errors.text)}>
      <Textarea
        borderRadius="10px"
        height="100%"
        {...register("text", textValidator)}
      />
      {errors.text && (
        <FormErrorMessage>{errors.text.message}</FormErrorMessage>
      )}
    </FormControl>
    <Flex flexDir="column" justifyContent="end" ml="1dvh">
      <IconButton
        borderRadius="10px"
        variant="outline"
        colorScheme="blue"
        aria-label="Attach files"
        mb="1dvh"
        icon={<BiPaperclip />}
      />
      <IconButton
        type="submit"
        borderRadius="10px"
        variant="outline"
        colorScheme="blue"
        aria-label="Send message"
        icon={<BiSend />}
      />
    </Flex>
  </form>
</Flex>;