My dilemma involves a basic form consisting of a select element and a button. What I want to accomplish is shifting the position of the form to the right directly after the select element https://i.sstatic.net/3gfkO.png
Below is the code snippet that I have:
return (
<>
<div>
<Select
{...props}
mode="multiple"
labelInValue
showArrow
options={scopes && scopes.map((scope) => ({ value: scope.scopeId, data: scope }))}
loading={!scopes || scopes.notLoaded}
onFocus={fetchData}
placeholder={'Choose existing scopes'}
notFoundContent={notFoundContent}
onSearch={onSearch}
onChange={handleChange}
value={selectedScopes && selectedScopes.map((_) => ({ value: _.scopeId, data: _ }))}
/>
<Button type="primary" disabled={isCreationVisible} onClick={() => showModal()}>
Create
</Button>
</div>
<ScopeCreationForm
initialId={searchValue}
visible={isCreationVisible}
nameUniqValidator={nameUniqValidator}
onCreate={handleCreate}
onCancel={handleCancel}
/>
</>
The question here lies in how can I achieve this desired positioning without the need for a separate CSS file