How to align VueJS components where one of them is a ThreeJS scene

Question

I have three components: Plan, Scene, and Controls, and I want to align them as follows:

The challenge in my case is that the plan has to be in a transition as a sidebar, while the scene is a three.js scene, and I need to change the width of the scene according to the status of the Plan Open/Close, I have tried the transition with css variables, but I couldn't manage to achieve my goal, here is a codesandbox to represent my problem.

Can you please tell me how can I achieve the components alignment as in the figure above? thanks in advance.

Answer 1

The solution was to align the component using styling css from the parent view/component:

: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;
}