Put AntD Form Button to the same level as Inputs - antd

Question

This is my component with an AntD Form in it.
import React, { PureComponent } from 'react';
import { Form, Input, Button } from 'antd';
import './home-page.scss';
class HomePageContainer extends PureComponent {
render() {
const formItemLayout = {
labelCol: { span: 4 },
wrapperCol: { span: 14 }
};
const buttonItemLayout = {
wrapperCol: { span: 14 }
};
return (
<div className='contact-company-container'>
<div className='contact-company-card-container'>
<div className='contact-company-card'>
<p>some text</p>
<p>another text</p>
<Form layout='inline'>
<Form.Item label='Pnone Number' {...formItemLayout}>
<Input placeholder='+77 926 12' />
</Form.Item>
<Form.Item label='Email' {...formItemLayout}>
<Input />
</Form.Item>
<Form.Item {...buttonItemLayout}>
<Button>Отправить</Button>
</Form.Item>
</Form>
</div>
</div>
</div>
);
}
}
export default HomePageContainer;
How do I put the two Inputs and the Button on the same (horizontal) level? That is I want them right to each other with no gaps.
Tried setting both labelCol and wrapperCol to { span: 24 } that leaves the Button on the next line.

Answer 1

This is how I currently solved it. Based on the 'Advanced Search' example on https://ant.design/components/form.
Maybe it wasn't the best solution to put an empty ( ) label above the Button. Suggestions are welcome.
class HomePageContainer extends PureComponent {
render() {
const formItemLayout = {
labelCol: { span: 24 },
wrapperCol: { span: 24 }
};
const buttonItemLayout = {
labelCol: { span: 24 },
wrapperCol: { span: 24 }
};
return (
<div className='contact-company-container'>
<div className='contact-company-card-container'>
<div className='contact-company-card'>
<p>abcdef</p>
<p>ghjklu</p>
<Form layout='inline'>
<Row gutter={24}>
<Col span={8}>
<Form.Item label='phone' {...formItemLayout}>
<Input placeholder='+77 926 12' />
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label='email' {...formItemLayout}>
<Input />
</Form.Item>
</Col>
<Col span={8}>
<Form.Item label=' ' {...buttonItemLayout}>
<Button>Send</Button>
</Form.Item>
</Col>
</Row>
</Form>
</div>
</div>
</div>
);
}
}