CSS 중급 과정에 오신 것을 환영합니다! 말씀하신 문제를 다루는 분야의 이름은 그리드(Grid)입니다. 왜 이런 분야가 따로 있느냐? 정답이 따로 없기 때문이죠. 지금까지 다음과 같은 다양한 접근법이 나온 바 있습니다.

• display: table; : 낡았지만 튼튼한 접근법
• display: flex; 및 다양한 flex 관련 속성들 : 최신상이지만 일부 환경에서 잘 안 됨
• Bootstrap, Bulma, Tailwind 등의 프론트엔드 프레임워크의 그리드 규칙들 : 배워서 써먹기에 빠르고 편하지만 뭔가 2% 부족할 수 있음. float: left;를 쓰는 놈도 있고 뭔가 다른걸 쓰는 놈도 있고 아주 천차만별

자! 검색을 시작하세요. The world is your oyster.

<div class="container">
  <div class="item">
  </div>
  <div>
  </div class="item">
</div>

<style>
.container{
    min-height: 100vh;
    display: flex;
    flex-direction: row;
}
.item{
    flex-grow: 1;
}
</style>

혹시나 도움이 될까 주소를 남깁니다.

https://opentutorials.org/course/2039

https://medium.com/alex-hinds-portfolio/making-an-html5-game-using-paper-js-dc05f51119d5