Bind the location of a div to the other via an equation involving position of the other via css

Viewed 15

I am so sorry for the basic question in CSS, but this has caused me a loss of sleep!

I have two divs, the red and the blue; I need the red to be on top and the blue below, and I need the blue to move with the red (the setup of the red div is below). The requirement is that:

A = 0.06 * B

C = 0.06 x D

  .red-div {
      top: 10vh;
      height: 45vh;
      position: absolute;
      aspect-ratio: 0.562;
      left: 50%;
      margin-right: -50%;
     transform: translate(-50%, 0);
     background: red;
     border-radius: 60%;
  }
  
    .blue-div {
      top: 5vh;
      height: 70vh;
      position: absolute;
      aspect-ratio: 0.6;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, 0);

     background: blue;
    }
<div class="blue-div">
</div>

<dov class="red-div">
<div>

Is this even possible in CSS? is there a way to bind the position of one div to the other this way?

Mobile shape

0 Answers
Related