Adjusting a div based on the size of the container

I have an HTML video player with Javascript generated controls(with background images of SVG graphics). I'm having an issue using the css calc() function, and need to resize the div's based on the video controls bar. So when the window is expanded/contracted, the controls need to adjust accordingly.

The controls div:

//Controls Wrapper
videoObj.controlsWrapper = document.createElement("div");
videoObj.controlsWrapper.className = "video-controls";

The controls are generated dynamically, so for instance, the play button is generated by this:

videoObj.playBtn = document.createElement("button");
videoObj.playBtn.className = "play btn";

So the question is how to adjust the size of the play button(which is a background of an SVG graphic), to a percentage(about 25%) of the height of the controls wrapper div.