CSS Border and Circle dynamically on top of each other

Question

I am trying to achieve this with my current code. I want the 3 sided border on top to dynamically adjust so that it is always perfectly on top of the circles no matter the size of either. Essentially I want the border position to be relative to the circles so that it always looks like the graphic no matter the size of each (These are size changing objects based on user input). This is what I have so far.

jsFiddle: https://jsfiddle.net/Kaevonz/6rc9jbo3/147/

$(function() {
  $('.circle').hide();
  $('#outer_diameter').on('change', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var $converted = ($outer_diameter * 3.75).toFixed(3);

    if ($outer_diameter > 85) {
      $("#error").text($outer_diameter + " is too big").show();
      return false;
    }

    if ($outer_diameter < 0) {
      $('#error').text('Please input positive integers').show();
      return false;
    }

    console.log($outer_diameter, $converted);
    $('.circle').css({
      height: (2 * $converted),
      width: (2 * $converted),
      top: "calc(50% - " + ($converted) + "px)",
      left: "calc(50% - " + ($converted) + "px)"
    });
    $('.circle').fadeIn(300);
    $('.circles').css({
      height: (2 * $converted) + 10,
      width: (2 * $converted) + 10
    })
    $('#error').hide();
  })




  $('.circle2').hide();
  $('#inner_diameter').on('change', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val()).toFixed(3);
    var $inner_diameter = parseFloat($("#inner_diameter").val()).toFixed(3);
    var $converted_2 = (($outer_diameter * 3.75) - (2 * ($inner_diameter * 3.75))).toFixed(3);

    if ($outer_diameter > 85) {
      $("#error")
      return false;
    }

    if ($inner_diameter < 0) {
      $('#error').text('Please input positive integers').show();
      return false;
    }

    if ($inner_diameter >= 0.33 * $outer_diameter) {
      $('#error').text('Wall Thickness invalid').show();
      return false;
    }


    console.log($inner_diameter, $converted_2);
    $('.circle2').css({
      height: (2 * $converted_2),
      width: (2 * $converted_2),
      top: "calc(50% - " + ($converted_2) + "px)",
      left: "calc(50% - " + ($converted_2) + "px)"
    });
    $('.circle2').fadeIn(300);
    $('#error').hide();
  })


  $('.border').hide();
  $('#cutter').on('change', function() {
    var $cutter = parseFloat($("#cutter").val()).toFixed(3);
    $('.border').css({
      width: $cutter
    })
    $('.border').fadeIn(300);
  })

});

<div class="wrapper">
  <div class="title">
    <h1>
      Cutter Calculator
    </h1>
  </div>
  <div class="Calculations">
    <input type="number" id="outer_diameter" placeholder="Enter Outer Diameter"> <br>
    <input type="number" id="inner_diameter" placeholder="Enter Thickness"> <br>
    <input type="number" id="cutter" placeholder="Enter Cutter O.D."> <br>
    <input type="button" id="bttn" name="calculate" value="Calculate">
  </div>
  <div class="border"></div>
  <div class="circles">
    <span class="circle"></span>
    <span class="circle2"></span>
  </div>
  <p id="error">

  </p>
</div>

body {
  margin: 0 auto;
  font-family: Helvetica, sans-serif;
}

.wrapper {
  height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.circles {
  margin-top: 50px;
  position: relative;
}

.circle {
  display: inline-block;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  border-color: blue;
  background-color: rgba(0, 0, 0, 0);
  z-index: -1;
  left: 50%;
  top: 50%;
  position: absolute;
}

.circle2 {
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  border-color: red;
  background-color: rgba(0, 0, 0, 0);
  z-index: -1;
  left: 50%;
  top: 50%;
}

.border {
  position: relative;
  border-top: 2px solid blue;
  border-right: 1px solid blue;
  border-left: 1px solid blue;
  width: 300px;
  height: 100px;
  margin: 0 auto;
}

Answer 1

Here's a sketch of placing div one over another. Using flex properties. The sizes are arbitrary.

var t = 0;

function loop() {
  t += 0.01;
  document.querySelector(".div2").style.height = (80 + 40 * Math.sin(t)) + "px"
  document.querySelector(".div2").style.width = (80 + 40 * Math.sin(t)) + "px"

  document.querySelector(".div1").style.height = (40 + 40 * Math.cos(t)) + "px"
  document.querySelector(".div1").style.width = (20 + 20 * Math.sin(t)) + "px"


  requestAnimationFrame(loop);

}
requestAnimationFrame(loop);

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  height: 180px;
  border: 1px solid gray;
}

.elem {
  box-sizing: border-box;
}

.div1 {
  border: 1px solid red;
  width: 40px;
  height: 20px;
  background: yellow;
}

.div2 {
  border: 1px solid blue;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  background: wheat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.div3 {
  border: 1px solid green;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  background: white;
}

<div class="container">
  <div class="elem div1"></div>
  <div class="elem div2">
    <div class="elem div3">
    </div>
  </div>
</div>