Align item vertically with semantic-ui-react

Question

I am having such code written in semantic-ui-react:

import styled from 'styled-components'
import { Grid } from 'semantic-ui-react'

const StyledMultiselect = styled(Multiselect)`
  width: 20em !important;
`

<Grid>
    <Grid.Row>
      <Grid.Column width={6}>
        <InlineHeader content="Add Project:" />
        <StyledMultiselect
          placeholder="Select project"
          onChange={(v) => addElement(processAddedElement ? processAddedElement({ key: v }) : v)} 
          options={projectNames}
          inline
        />
      </Grid.Column>
      <Grid.Column width={6}>
        <InlineHeader content="Add Project Group:"/>
        <StyledMultiselect
          placeholder="Select project group"
          onChange={(v) => addProjectGroup(v, addElement)}
          options={projectGroupNames}
          inline
        />
      </Grid.Column>
    </Grid.Row>
  </Grid>

Where InlineHeader is:

export const InlineHeader = styled(({ marginTop, ...props }) => <Header {...props} />)`
  display: inline-block;
  margin-right: 1em !important;
  margin-top: ${props => props.marginTop || "0em"} !important;
  margin-bottom: 0 !important;
  
  .sub.header {
    display: inline-block !important;
    margin-left: 0.5em !important;
  }

What I see is the following:

And I want header and select field to be aligned vertically. I am able to place InlineHeader and StyledMultiselect in different Grid.Column and align them using marginTop property, but then the behavior for screen resizing is much worse and they are horizontally spaced too far. If they are in one Grid.Column, then marginTop applied to InlineHeader does not work. I tried putting InlineHeader in span and applying styles but that fails to work either. Applying marginTop or paddingTop to StyledMultiselect does not work. Any ideas on how to vertically align them in a single Grid.Column?

Update

What I noticed is that the positioning is correct until I add multiple on the semantic-ui-react Form.Dropdown (StyledMultiselect), so the following is positioned correctly vertically:

<Form.Dropdown
  placeholder="Select project"
  inline
  selection
/>

But if we add multiple it slides down in its vertical position (see screenshot above):

<Form.Dropdown
  placeholder="Select project"
  inline
  selection
  multiple
/>

Answer 1

The issue is with the multi-select type input in the original CSS for SUI, not in the React classnames. It looks like you are trying to fight those to make this work. There is only a one line CSS change needed that should resolve this for you. It also involves using the correct accessible <label> tag for that input instead of using a Header component.

.ui.form .inline.field > .multiple.selection.dropdown {
  vertical-align: middle;
}

Here is a codesandbox with this single line CSS fix that you can apply as necessary to your project, depending on how you are handling your styles.