我有三個組件:計劃、場景和控件，我希望將它們對齊如下:

在我的例子中的挑戰是，計劃必須在一個側邊欄的過渡中，而場景是一個three.js場景，我需要根據計劃打開/關閉的狀態來改變場景的寬度，我已經嘗試了css變量的過渡，但我無法實現我的目標，這里有一個codesandbox來代表我的問題。

你能告訴我怎樣才能實現上圖中的組件對齊嗎？提前感謝。

解決方案是使用父視圖/組件中的樣式css來對齊組件:

:root {
  --plan-width: 15%;
  --plan-height: 80%;
}

#main {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#scene {
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: var(--plan-height);
  float: right;
}

#plan {
  overflow-x: hidden;
  position: absolute;
  width: var(--plan-width);
  height: var(--plan-height);
  display: inline-block;
  background-color: #474444;
  left: 0%;
  top: 0%;
  scrollbar-width: 20px;
}

#controls {
  /* position: inherit; */
  position: relative;
  display: flex;
  width: 100%;
  height: 17%;
  /* margin: 1px; */
  padding: 1px;
  background-color: #575555;
}