CSS：多选浮于其他元素之上

Question

我有一排元素，这些元素构成了管理面板的表单。大多数是<input>样式元素，但我使用的是Formik，因此从技术上讲，它们是Formik Field。

我从@khanacademy/react-multi-select中添加了一个MultiSelect组件，它按预期的形式工作，但出现了一些奇怪的现象。

在表单中，我的代码如下

    <Field
      type="..."
      name="..."
      placeholder="..."
      className="..."
    />
    <ErrorMessage name="..." component="div" />
    <MultiSelect
      className="multi-select"
      placeholder="..."
      options={options}
      selected={selected}
      onSelectedChanged={selected => this.setState({ selected })}
    />
    <Button
      variant="primary"
      size="sm"
      type="submit"
      disabled={isSubmitting}
    >
      Save
    </Button>

不同寻常的是，多选元素出现在行中其他字段上方：

这里似乎没有任何边距或缓冲区在起作用，只有多选div悬停在其余行上方。

我唯一调整过的CSS是使所有元素成为display: inline-block，因为多选通常会创建换行符。我还调整了表单输入宽度。

绝对不知道会导致这种悬停的原因，感谢任何帮助。