Having a hard time implementing some react stuff in my threejs site

Questions
,
1

So the idea is to have a rectangle with 4 buttons in it that all have a different image on them and do different stuff, besides the point. The point is I need to try and get them to be evenly spaced within the rectangle and stay in it when I mess with the size of the window and that is not really happening. I’ve tried using marginTop and marginBottom, percentages, vs and vw. Hardcoding the number of pixels is not an option. I tired to give the selector div an id but I didn’t really know how to use that in any way. Is there any way of achieving what I’m trying to do?

<div className="selector" style={{position: 'relative', top: 90, left: 10, display: 'flex', flexDirection: 'column'}}>
      <button style={{ marginTop: '6%', marginLeft: '25px', width: '120px', height: '17.5%'}}> <img style={{height: '100%', maxHeight: '110px', alignContent: 'center'}} src={table} alt="my image" onClick={pause}/> </button>
      <button style={{ marginTop: '6%', marginLeft: '25px', width: '120px', height: '17.5%'}}> <img style={{height: '100%', maxHeight: '110px', alignContent: 'center'}} src={table} alt="my image" onClick={pause}/> </button>
      <button style={{ marginTop: '6%', marginLeft: '25px', width: '120px', height: '17.5%'}}> <img style={{height: '100%', maxHeight: '110px', alignContent: 'center'}} src={table} alt="my image" onClick={pause}/> </button>
      <button style={{ marginTop: '6%', marginLeft: '25px', width: '120px', height: '17.5%'}}> <img style={{height: '100%', maxHeight: '110px', alignContent: 'center'}} src={table} alt="my image" onClick={pause}/> </button>
    </div>

button {
  border-radius: 10px;
  background-color: #404BE3;
  color: white;
  border-width: 1px;
  font-family: Arial;
  font-size: medium;
  height: 30px;
  width: 100px;
  text-align: center;
}
.selector{
  width: 170px;
  height: calc(100vh - 140px);
  background-color: #404BE3;
  border-radius: 20px; /* Round the corners */
}

image
image1912×886 44 KB

2

CSS may be unrelated to three.js

3

You can do it with CSS flexbox.

However, you can also use older tricks, like HTML tables and a bit of CSS, like in this demo:
(resize the browser window to see the effect)

https://codepen.io/boytchev/full/VwGNMzw

image