Hi there, I'm trying to figure out how to align the content of this card in a single row instead of stacked on top of each other. Here's the code snippet:
<div class="container">
<form onSubmit={submitHandler}>
<div class="row" style={{ width: "300px", marginTop: "40px", marginLeft: "70px", height: "450px" }}>
<FormControl variant="outlined">
<InputLabel id="demo-simple-select-outlined-label" >Choose Module Type</InputLabel>
<Select style={{ marginBottom:"20px"}}
name="name"
labelId="demo-simple-select-outlined-label"
id="demo-simple-select-outlined"
onChange={handleDropdownChange}
label="TypeList"
>
{
dropdown.map(options =>
<MenuItem value={options["moduleType"]} >{options["moduleType"]}</MenuItem>
)}
</Select>
<TextField
style={{ marginTop: "10px", marginBottom:"20px" }}
id="outlined-helperText"
label="Module Name"
onChange={handleChangeModuleName}
variant="outlined"
/>
<TextField
style={{ marginTop: "20px" }}
id="outlined-helperText"
label="Course Duration"
onChange={handleChangeDuration}
variant="outlined"
/>
<div style={{ margin: "auto", marginTop: "20px" }}>
<Button type="submit" variant="contained" color="primary">ADD</Button>
</div>
</FormControl>
</div>
</form>
</div>
I'd appreciate any help or tips on how to achieve this layout. Thank you :)