짹짹 버튼 클릭시 게시물을 우측이 아닌 아래로 정렬하는 방법

질문)짹짹을 눌렀을 때 게시물이 우측에 정렬되는데 어떻게 해야 아래로 정렬될까요?

현재 게시물 추가시 화면)

작성한 코드)

PostForm.js

import React,{useCallback, useState, useRef} from 'react';
import {Form, Input, Button} from 'antd';
import {useSelector, useDispatch} from 'react-redux';
import {addPost} from '../reducers/post';

const PostForm = () => {
        const {imagePaths} = useSelector((state) => state.post);
        const dispatch = useDispatch();
        const imageInput =  useRef();
        const [text, setText] = useState('');
        const onChangeText = useCallback((e) => {
            setText(e.target.value);
        }, [])
        const onSubmit = useCallback(()=> {
            dispatch(addPost);
            setText('');
        });
        const onClickImageUpload = useCallback(() => {
            imageInput.current.click();
        }, [imageInput.current]);
    return (
        <Form style={{ margin: '10px 0 20px'}} encType="multipart/form-data" onFinish={onSubmit}>
            <Input.TextArea 
                value={text} 
                onChange={onChangeText} 
                maxLength={140} 
                placeholder="어떤 신기한 일이 있었나요?"
            />
            <div>
                <input type="file" multiple hidden ref={imageInput}/>
                <Button onClick={onClickImageUpload}>이미지 업로드</Button>
                <Button type="primary" style={{float:'right'}} htmlType="submit">짹짹</Button>
            </div>
            <div>
                {imagePaths.map((v) => (
                    <div key={v} style={{display: 'inline-block'}}>   
                        <img src={v} style={{width:'200px'}} alt={v}/>
                        <div>
                            <Button>제거</Button>
                        </div>
                    </div>
                ))}
            </div>
        </Form>
    )
}
export default PostForm;

post.js

export const initalState = {
    mainPosts:[{
        id:1,
        User:{
            id:1,
            nickname: '해지니1',
        },
        content: '첫 번째 게시글 #해시태그 #행복한집사생활',
        Images:[{
            src: 'https://loremflickr.com/640/360'
        },{
            src: 'https://placekitten.com/640/360'
        },{ 
            src: 'https://picsum.photos/640/360'
        }],
        Comments: [{
            User: {
                nickname:'해지니2'
            }, 
            content: '고양이는 다 기여벙',
        }, {
            User: {
                nickname:'해지니3'
            }, 
            content: '냥냥냥'
        }]
    }],
    imagePaths: [], //게시물 저장 경로
    postAdded: false //게시글 추가 완료시 true
}

const ADD_POST = 'ADD_POST'; 
export const addPost = {
    type: ADD_POST
}

const dummyPost = {
    id: 2,
    content: '더미데이터',
    User: {
        id:1,
        nickname:'해지니',
    },
    Images: [],
    Comments: [],
};

const reducer = (state = initalState, action) => {
    switch(action.type){
        case ADD_POST:
            return {
                ...state,
                mainPosts: [dummyPost, ...state.mainPosts],
                postAdded: true,
            };
        default:
            return state;
    }
}
export default reducer; 

 style={{ display: 'flex', flexDirection: 'column' }}

import React from 'react';
import PropTypes from 'prop-types';
import Link from 'next/link';
import { Menu, Input, Row, Col } from 'antd';
import styled from 'styled-components';

import UserProfile from "../components/UserProfile";
import LoginForm from "../components/LoginForm"
import {useSelector} from 'react-redux';
const SearchInput = styled(Input.Search)`
    vertical-align:middle;
`;

const AppLayout = ({ children }) => {
    const isLoggedIn = useSelector((state) => state.user.isLoggedIn);
    return(
        <div>
            <Menu mode="horizontal">
                <Menu.Item>
                    <Link href="/"><a>노드버드</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <Link href="/profile"><a>프로필</a></Link>
                </Menu.Item>
                <Menu.Item>
                    <SearchInput enterButton />
                </Menu.Item>
                <Menu.Item>
                    <Link href="/signup"><a>회원가입</a></Link>
                </Menu.Item>
            </Menu>    
            <Row gutter={8} style={{ display: 'flex', flexDirection: 'column' }}>
                <Col xs={24} md={6}>
                    {isLoggedIn? <UserProfile/> : <LoginForm/>}
                </Col>
                   {children}
                <Col xs={24} md={6}>
                    <a href="https://github.com/haejin-park?tab=repositories">Made by Haejin</a>
                </Col>
            </Row>
        </div>
    );
};

AppLayout.propTypes = {
    children:PropTypes.node.isRequired,
};

export default AppLayout;

  "@ant-design/icons": "^4.2.1",
  "antd": "^4.2.1",

<Col>
  {children}
</Col>