[CSS(React)]レイアウトが一段ずれる

Question

前提・実現したいこと

blockエリアにinline-blockで二つのdivを配置しているので、綺麗に二つ並んで欲しいのですが、後者のdivが一段下がって並んでしまいます。
どのようにすればいいでしょうか。

該当のソースコード

user: {
    display: 'inline-block',
  },
submitArea: {
    display: 'block',
  },
  messageArea: {
    display: 'inline-block',
  },

<div className={classes.submitArea}>
        <div className={classes.title}>{"Submit"}</div>
        <div className={classes.user}>
          <SelectUser />
        </div>
        <div className={classes.messageArea}>
            <TextField
            />
          {button}
        </div>
      </div>

Answer 1

display: inline-block;を指定している要素の両方に、
vertical-align: top;を指定してみると解決しないでしょうか?