I have 2 radio buttons I want to align them horizontally using Grid from semantic-ui-react package.How can I do so? Here's my code for the component.
import { Grid, Form } from "semantic-ui-react";
render() {
return (
<StyledForm id="form_container">
<Grid>
<Grid.Row>
<Grid.Column width={3}>
<input
label="Client Name"
value={this.props.clientName}
onChange={this.setClientName}
/>
</Grid.Column>
<Grid.Column width={3}>
<label htmlFor="status">{"Status"}</label>
<Grid>
{" "}
<input // set this radio button and the below one horizontally
type="radio"
id="html"
name="status"
value="HTML"
onClick={() => this.setClientStatus("Active")}
/>
<label for="html">Active</label>
{" "}
<input //make it horizontally align with above one
type="radio"
id="css"
name="status"
value="CSS"
onClick={() => this.setClientStatus("InActive")}
/>
<label for="css">InActive</label>
</Grid>
</Grid.Column>
</Grid.Row>
<Grid.Row>
{/* <InterfaceSelect
isRequired
name='apis_interface_id'
label={translateText('Access Grants')}
/> */}
</Grid.Row>
<Grid.Row>
<ClientList />
</Grid.Row>
</Grid>
</StyledForm>
);
}
}
Thanks for help