在React中使用模态的表单组

Question

我有以下模态。我正在尝试使用表单组将2个或4个表单组放在同一行上，但是它不起作用。这么多的表单输入空间看起来很丑陋。我可以在模式内使用表单组吗？这是代码：

<Modal size={size} open={open} onClose={closeModal}>
    <Modal.Header>
        Generated Channel Information
    </Modal.Header>
    <Modal.Content style={styles.modalContent}>
            <Form.Input fluid label='LID' name='lid' value={lid} onChange={this.handleInputChange} />
            <Form.Input fluid label='Channel Number' name='hfivePrimaryPortValue' value={channelNum}  onChange={this.handleInputChange} />
            <Form.Input fluid label='Origin Group' name='hfivePrimaryPortValue' value={originGroup}  onChange={this.handleInputChange} />
            <Form.Input fluid label='Directory' name='hfivePrimaryPortValue' value={directory}  onChange={this.handleInputChange} />
            <Form.Group widths='equal'>
                <Form.Select fluid search label='H5 Encoder' name='packagers' value={packagers} options={languages} placeholder='Choose Audio Channels' onChange={this.handleAudioInputChange} multiple = "true" />
                <Form.Select fluid search label='H5 Pair Encoder' name='packagers' value={packagers} options={languages} placeholder='Choose Audio Channels' onChange={this.handleAudioInputChange} multiple = "true" />
            </Form.Group>
            <Form.Group widths='equal'>
                <Form.Select fluid search label='Titan Encoder' name='packagers' value={packagers} options={languages} placeholder='Choose Audio Channels' onChange={this.handleAudioInputChange} multiple = "true" />
                <Form.Select fluid search label='Titan Pair Encoder' name='packagers' value={packagers} options={languages} placeholder='Choose Audio Channels' onChange={this.handleAudioInputChange} multiple = "true" />
                <Form.Select fluid search label='Titan Packager' name='packagers' value={packagers} options={languages} placeholder='Choose Audio Channels' onChange={this.handleAudioInputChange} multiple = "true" />
                <Form.Select fluid search label='H5 Packager' name='packagers' value={packagers} options={languages} placeholder='Choose Audio Channels' onChange={this.handleAudioInputChange} multiple = "true" />
            </Form.Group>
            <Form.Input fluid label='Destination IP' name='hfivePrimaryPortValue' value={destinationIP}  onChange={this.handleInputChange} />
    </Modal.Content>
    <Modal.Actions style={{padding: '0.7em'}}>
    <Button content='Close and Continue Editing' floated='left'
        style={{margin: 0}} onClick={this.closeModal} />

    <Button negative content='Submit'
    style={{margin: 0}} onClick={this.submitModal} />
    </Modal.Actions>
</Modal>]