antd: как отобразить файл списка загрузки справа от Dragger Upload

Question

Я пытаюсь, чтобы список загрузки файлов отображался справа от элемента Upload Dragger, поскольку пространство на экране ограничено в вертикальном смысле. Для справки, это пример изображения того, что я пытаюсь сделать:

Пример изображения

Однако, что бы я ни делал, создается список выгрузки файлов:всегда отображается под драгером. Даже когда я указываю 'display: inline-block' в качестве стиля. Кажется, что список загрузки генерируется динамически из-за структуры antd, и я не могу изменить его расположение. Может ли кто-нибудь придумать, возможно ли это с помощью списка загрузки, сгенерированного antd?

import React from 'react';
import { Upload, Icon, message, Typography, Button } from 'antd';

const { Dragger } = Upload;

export interface projectFilesUploadFormProps {
    handleUpdateAndNext(updateProjectDetails: () => void): void;
    handleBack(): void;

}


const draggerProps = {
    name: 'file',
    multiple: true,
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    onChange(info: { file: { status?: any; name?: any; }; fileList: any; }) {
      const { status } = info.file;
      if (status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
      } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

export const ProjectFilesUploadForm = (props: projectFilesUploadFormProps) => {


    return (
        <div
        style={{
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
            height: 'inherit'
        }}
      >
          <span>
        <Typography.Title level={2}>
          Upload your Project files
        </Typography.Title>
        <Typography.Text >
          It can be any kind of file 
        </Typography.Text>
      </span>
      <span style={{ display: 'inline-block'}}> <---- DOESN'T DISPLAY INLINE
        <Dragger  listType="picture" style={{borderRadius: 0, width: '50%'}} {...draggerProps}>
        <p className="ant-upload-drag-icon">
          <Icon type="inbox" />
        </p>
        <p className="ant-upload-text">Click or drag file to this area to upload</p>
        <p className="ant-upload-hint">
          Support for a single or bulk upload. Strictly prohibit from uploading company data or other
          band files
        </p>
      </Dragger>
      </span>
      <span>
      <Button
          type="link"
          data-testid="new-project-button"
          size="large"
          style={{ width: 100 }}
          onClick={() => props.handleBack() }
        >
          Back
        </Button>
        <Button
          type="primary"
          data-testid="new-project-button"
          size="large"
          style={{ width: 100, marginBottom: 50 }}
          onClick={() => props.handleUpdateAndNext(props.updateProjectDetails)}
        >
          Next
        </Button>
      </span>

      </div>

    );