Inputs side-by-side in react-admin

Question

I want to put 3 inputs side-by-side. I have a code as follows and in every iterate I want three components side-by-side. Is it possible?

{
    this.state.features.length > 0 ?
        this.state.features.map((feature) => {
            return (
                <div>
                    <BooleanInput key={feature} source={this.assignIsFeatureActiveProp(feature)} label={feature} />
                    <DisabledInput source="id" label="Value" defaultValue={feature} />
                    <TextInput source={this.assignFeatureValueProp(feature)} label="Value" />
                </div>
            )
        })
        :
        null
}

Answer 1

You can pass style props, for example, use the following style.

style={{ display: 'inline', float: 'left', marginLeft: '20px' }}

The above code will looks like

{
    this.state.features.length > 0 ?
        this.state.features.map((feature) => {
            return (
                <div>
                    <BooleanInput key={feature} source={this.assignIsFeatureActiveProp(feature)} label={feature} style={{ display: 'inline', float: 'left', marginLeft: '20px' }} />
                    <DisabledInput source="id" label="Value" defaultValue={feature} style={{ display: 'inline', float: 'left', marginLeft: '20px' }} />
                    <TextInput source={this.assignFeatureValueProp(feature)} label="Value" style={{ display: 'inline', float: 'left', marginLeft: '20px' }} />
                </div>
            )
        })
        :
        null
}