如何水平和垂直居中单个项目，但允许其他项目环绕它

我正在尝试实现的布局：

概念是使一个始终位于容器内居中的元素，然后再将另一个元素粘贴到容器的侧面。如果该侧面元件太宽，则应包裹在主要元件下方，而不会影响对中。

#container {
  width: 400px;
  height: 200px;
  background-color: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

#container::before {
  content: '';
  flex: 1;
}

#mainText {
  font-size: 60px;
}

#subText {
  flex: 1;
  font-size: 16px;
  white-space: nowrap;
}

  MAIN
  sub