How can I make one HTML element dynamically resize proportionally to another element?

Question

I'm fairly novice-level with CSS, and I'm trying to create a dynamic layout that is eluding me. I've also found the answer hard to search for; most answers seem to be focused on resizing images, which I've already figured out.

I have an image drawn on a canvas, with a slider element that resizes the image/canvas with javascript. That part is complete - don't need help with that.

What I want are four buttons, two on the left side of the image, and two on the top, which maintain their relative size as half of the image as the image resizes. That is, as the image gets bigger, I want the two left side buttons to expand so they each continue to take up half of the height of the image (minus the blank space between), and similarly with the top two buttons.

I've included a diagram below of what I'm trying to accomplish.

Is there a pure-CSS way to do this? I'd prefer not to do the active resizing with javascript, but if that's the only way, I'd like to know that too. Thank you!

Desired layout with image set to be small:

Desired layout with image set to be large:

(the change in the spacing between the buttons isn't intentional, and it's supposed to say "button 3" and "button 4", not "button 3" twice)

Answer 1

You can do this with a CSS Grid:

.container {
  display: inline-grid;
  grid-template:
    " .    btn3   btn4 " 50px
    "btn1 resize resize" 1fr
    "btn2 resize resize" 1fr
    /50px  1fr    1fr;
  grid-gap: 5px;
}

.resize { grid-area: resize; }
.btn1 { grid-area: btn1; }
.btn2 { grid-area: btn2; }
.btn3 { grid-area: btn3; }
.btn4 { grid-area: btn4; }

/* everything below this point is incidental */

*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

button {
  border-radius: 4px;
  background: navy;
  color: white;
  border: 2px solid black;
}

.resize {
  min-height: 150px;
  min-width: 150px;
  resize: both;
  overflow: auto;
  background: black;
  color: white;
}

.vertical {
  /*writing-mode: sideways-lr; /* not yet well-supported */
}

<div class="container">
  <button class="btn1 vertical">Button 1</button>
  <button class="btn2 vertical">Button 2</button>
  <button class="btn3">Button 3</button>
  <button class="btn4">Button 3?</button>
  <div class="resize"></div>
</div>

We define a grid with three rows and three columns using grid-template. The first row and column have a set size of 50px, but the second and third divide up the rest of the free space evenly. The image spreads across the four southeast cells.