[css(material-ui)]プルダウン選択時に隣のレイアウトが微妙に動かないようにしたい

Question

前提・実現したいこと

レイアウトについてですが、プルダウンで選択するたびに隣のdiv要素が微妙にずれます。
このずれを無くすにはどのようにすればいいでしょうか。

発生している問題・エラーメッセージ

隣のレイアウトがプルダウン選択時に微妙にズレる

該当のソースコード

user: {
    display: 'inline-block',
    margin: '20px',
  },
  userArea: {
    display: 'block',
    backgroundColor: blue[100],
  },
  submitArea: {
    display: 'block',
  },
  messageArea: {
    display: 'inline-block',
    verticalAlign: 'top',
    padding: '10px',
  },

<div className={classes.submitArea}>
        <div className={classes.user}>
          <SelectUser value='Target' onSet={setTarget}/>
        </div>
        <div className={classes.messageArea}>
          <TextField
            ...
            />
          {button}
        </div>
      </div>

Comments

[Lhankor_Mhy]

なにかのフレームワークを使っていると思いますので、そのフレームワークのタグを追加することをお勧めします。

もしフレームワークが問題と関係ないのであれば、HTMLを出力されたものに差し替えてください。

[aiai8976]

すみません。修正しました。

Answer 1

.submitArea (?) にdisplay: flex;を指定してみてはいかがでしょうか。
その際うまくいかなければ、.user (?) と.messageArea (?) のdisplay: inline-block;を削除してみてください。

  user: {
    // display: 'inline-block',
    margin: '20px',
  },
  userArea: {
    display: 'block',
    backgroundColor: blue[100],
  },
  submitArea: {
    // display: 'block',
    display: 'flex',
  },
  messageArea: {
    // display: 'inline-block',
    verticalAlign: 'top',
    padding: '10px',
  },