Vertically center text within border-CodePudding

I have a program that dynamically changes size of CSS shapes based on user input. I have text labels as well too. I am trying to get this text to stay vertically centered no matter the size of the shapes. This is my current issue, the first picture is okay, but the second picture is not what I want to happen. How should I fix this?

jsFiddle:

jQuery(document).ready(function($) {
  $(function() {

    $('.div3 span').hide();
    $('.div5').hide();
    $('.div5brother').hide();

    function hideObjects($) {
      $('.div1').hide();
      $('.div2').hide();
      $('.div3').hide();
    }

    function hideErrors($) {
      $('#error').hide();
      $('#error2').hide();
      $('#error3').hide();
      $('#error4').hide();
      $('#error5').hide();
    }

    $(document).on('change', '#field_2w269, #field_wg4s2, #field_d6hwp', function() {
      mainCode()
    })

    function mainCode() {
      const $multiplier = 7.5; //pixel sizing multiplier for user inputs
      //Declare Variables for User Inputs
      const $outer_diameter = parseFloat($("#field_wg4s2").val());
      const $wall_thickness = parseFloat($("#field_d6hwp").val());
      const $cutter_diameter = parseFloat($("#field_2w269").val());
      //Convert diameters to radii
      const $cutter_radius = ($cutter_diameter / 2);
      const $pipeOutsideRadius = ($outer_diameter / 2);
      const $pipeInsideRadius = ($pipeOutsideRadius - $wall_thickness);
      //Find Cutter Travel
      const $cutterTravel = ($pipeOutsideRadius - (Math.sqrt(Math.pow($pipeInsideRadius, 2) - Math.pow($cutter_radius, 2))));
      //Convert sizes for Visual Representation
      const $visualPipeOD = ($outer_diameter * $multiplier);
      const $visualWallThk = ($wall_thickness * $multiplier);
      const $visualPipeID = ($visualPipeOD - (2 * $visualWallThk));
      const $visualCutDia = ($cutter_diameter * $multiplier);
      const $visualCutTravel = ($cutterTravel * $multiplier);

      if ($cutter_diameter > $outer_diameter) {
        $('#error').text('Cutter cannot be larger than Pipe O.D.').show();
        hideObjects($);
        return false;
      }

      if ($visualCutDia > $visualPipeID) {
        $('#error2').text('Cutter cannot be larger than Pipe I.D.').show();
        hideObjects($);
        return false;
      }

      if ($cutter_diameter < 0) {
        $('#error').text('Please input a positive value').show();
        hideObjects($);
        return false;
      }

      if ($wall_thickness >= 0.33 * $outer_diameter) {
        $('#error4').text('Wall Thickness is invalid').show();
        hideObjects($);
        return false;
      }
      $('#error4').hide();


      if ($wall_thickness < 0) {
        $('#error3').text('Please input a positive value').show();
        hideObjects($);
        return false;
      }

      if ($outer_diameter < 0) {
        $('#error').text('Please input a positive value').show();
        hideObjects($);
        return false;
      }
      if ($cutter_diameter > 72) {
        $('#error').text('Cutter is too big.').show();
        hideObjects($);
        return false;
      }

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

      $('.div1').css({
        height: ($visualCutTravel),
        width: ($visualCutDia)
      });
      $('.div1').fadeIn(300);

      $('.div2').css({
        height: ($visualPipeOD),
        width: ($visualPipeOD),

      });
      $('.div2').fadeIn(300);

      $('.div3').css({
        height: ($visualPipeID),
        width: ($visualPipeID),

      });
      $('.div3').fadeIn(300);

      $('.div5').css({
        height: ($visualCutTravel),
        width: ($visualCutDia)
      });

      $('.div5brother').css({
        height: ($visualCutTravel),
        right: (102.5 - $visualCutDia / 2 - 80),
      });
      $('.div5brother').fadeIn(300);

      hideErrors($);
    }

    $(document).on('change', '#field_2w269', function() {
      $('.div1 span').fadeIn(100);
    })

    $(document).on('change', '#field_wg4s2', function() {
      $('.div3 span').fadeIn(100);
    })

    $(document).on('change', '#field_2w269', function() {
      $('.div5').fadeIn(100);
    })

  });
});

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

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

.div1 {
  border-top: 3px solid #0DA8AA;
  border-left: 1px solid #0DA8AA;
  border-right: 1px solid #0DA8AA;
  height: 0px;
  background: white;
}

.div2 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 0px;
  height: 0px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.div3 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 0px;
  height: 0px;
  background: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.div3>span {
  transform: translate(-10%, -55%) rotate(-45deg);
  font-size: 11px;
}

.div4 {
  border-top: 0.5px dashed black;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.div5 {
  border: 0.5px dashed black;
  width: 120px;
  height: 90px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  left: 50%;
}

.div5brother {
  position: absolute;
  top: 0;
  right: -80px;
  width: 80px;
  height: 50px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.div5brother>span {
  font-size: 9px;
  line-height: 50px;
  display: block;
  position: absolute;
  top: 5px;
  right: -40px;
  text-transform: uppercase;
}

.div5container {
  width: 205px;
  height: 50px;
  position: absolute;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <p id="error"></p>
  <p id="error2"></p>
  <p id="error3"></p>
  <p id="error4"></p>
  <p id="error5"></p>
  <div ></div>
  <div >
    <div ><span>Pipe O.D.</span>

      <div >
        <div >
        </div>
        <div >
          <span>Min. Cutter Travel</span>
        </div>
      </div>

      <div >
      </div>
    </div>
  </div>
</div>

<input type="number" id="field_2w269" placeholder="Enter Cutter O.D."> <br>
<input type="number" id="field_wg4s2" placeholder="Enter Outer Diameter"> <br>
<input type="number" id="field_d6hwp" placeholder="Enter Thickness"> <br>
<input type="button" id="bttn" name="calculate" value="Calculate">

CodePudding user response：

The problem is height of div.div5brother should be the same as line-height of div.div5brother>span.

So if you make them equal and remove top: 5px; from .div5brother > span styles it should work.

jQuery(document).ready(function($) {
  $(function() {

    $('.div3 span').hide();
    $('.div5').hide();
    $('.div5brother').hide();

    function hideObjects($) {
      $('.div1').hide();
      $('.div2').hide();
      $('.div3').hide();
    }

    function hideErrors($) {
      $('#error').hide();
      $('#error2').hide();
      $('#error3').hide();
      $('#error4').hide();
      $('#error5').hide();
    }

    $(document).on('change', '#field_2w269, #field_wg4s2, #field_d6hwp', function() {
      mainCode()
    })

    function mainCode() {
      const $multiplier = 7.5; //pixel sizing multiplier for user inputs
      //Declare Variables for User Inputs
      const $outer_diameter = parseFloat($("#field_wg4s2").val());
      const $wall_thickness = parseFloat($("#field_d6hwp").val());
      const $cutter_diameter = parseFloat($("#field_2w269").val());
      //Convert diameters to radii
      const $cutter_radius = ($cutter_diameter / 2);
      const $pipeOutsideRadius = ($outer_diameter / 2);
      const $pipeInsideRadius = ($pipeOutsideRadius - $wall_thickness);
      //Find Cutter Travel
      const $cutterTravel = ($pipeOutsideRadius - (Math.sqrt(Math.pow($pipeInsideRadius, 2) - Math.pow($cutter_radius, 2))));
      //Convert sizes for Visual Representation
      const $visualPipeOD = ($outer_diameter * $multiplier);
      const $visualWallThk = ($wall_thickness * $multiplier);
      const $visualPipeID = ($visualPipeOD - (2 * $visualWallThk));
      const $visualCutDia = ($cutter_diameter * $multiplier);
      const $visualCutTravel = ($cutterTravel * $multiplier);

      if ($cutter_diameter > $outer_diameter) {
        $('#error').text('Cutter cannot be larger than Pipe O.D.').show();
        hideObjects($);
        return false;
      }

      if ($visualCutDia > $visualPipeID) {
        $('#error2').text('Cutter cannot be larger than Pipe I.D.').show();
        hideObjects($);
        return false;
      }

      if ($cutter_diameter < 0) {
        $('#error').text('Please input a positive value').show();
        hideObjects($);
        return false;
      }

      if ($wall_thickness >= 0.33 * $outer_diameter) {
        $('#error4').text('Wall Thickness is invalid').show();
        hideObjects($);
        return false;
      }
      $('#error4').hide();


      if ($wall_thickness < 0) {
        $('#error3').text('Please input a positive value').show();
        hideObjects($);
        return false;
      }

      if ($outer_diameter < 0) {
        $('#error').text('Please input a positive value').show();
        hideObjects($);
        return false;
      }
      if ($cutter_diameter > 72) {
        $('#error').text('Cutter is too big.').show();
        hideObjects($);
        return false;
      }

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

      $('.div1').css({
        height: ($visualCutTravel),
        width: ($visualCutDia)
      });
      $('.div1').fadeIn(300);

      $('.div2').css({
        height: ($visualPipeOD),
        width: ($visualPipeOD),

      });
      $('.div2').fadeIn(300);

      $('.div3').css({
        height: ($visualPipeID),
        width: ($visualPipeID),

      });
      $('.div3').fadeIn(300);

      $('.div5').css({
        height: ($visualCutTravel),
        width: ($visualCutDia)
      });

      $('.div5brother').css({
        height: ($visualCutTravel),
        right: (102.5-$visualCutDia/2-80),
      });
      $('.div5brother > span').css({
        lineHeight: `${$visualCutTravel}px`,
      });


      $('.div5brother').fadeIn(300);

      hideErrors($);
    }

    $(document).on('change', '#field_2w269', function() {
      $('.div1 span').fadeIn(100);
    })

    $(document).on('change', '#field_wg4s2', function() {
      $('.div3 span').fadeIn(100);
    })

    $(document).on('change', '#field_2w269', function() {
      $('.div5').fadeIn(100);
    })

  });
});

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

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

.div1 {
  border-top: 3px solid #0DA8AA;
  border-left: 1px solid #0DA8AA;
  border-right: 1px solid #0DA8AA;
  height: 0px;
  background: white;
}

.div2 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 0px;
  height: 0px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.div3 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 0px;
  height: 0px;
  background: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.div3 > span {
  transform: translate(-10%, -55%) rotate(-45deg);
  font-size: 11px;
}

.div4 {
  border-top: 0.5px dashed black;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.div5 {
  border: 0.5px dashed black;
  width: 120px;
  height: 90px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  left: 50%;
}

.div5brother {
  position: absolute;
  top: 0;
  right: -80px;
  width: 80px;
  height: 50px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.div5brother > span {
  font-size: 9px;
  line-height: 50px;
  display: block;
  position: absolute;
  right: -40px;
  text-transform: uppercase;
}

.div5container {
  width: 205px;
  height: 50px;
  position: absolute;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <p id="error"></p>
  <p id="error2"></p>
  <p id="error3"></p>
  <p id="error4"></p>
  <p id="error5"></p>
  <div ></div>
  <div >
    <div ><span>Pipe O.D.</span>

      <div >
        <div >
        </div>
        <div >
          <span>Min. Cutter Travel</span>
        </div>
      </div>

      <div >
      </div>
    </div>
  </div>
</div>

<input type="number" id="field_2w269" placeholder="Enter Cutter O.D."> <br>
<input type="number" id="field_wg4s2" placeholder="Enter Outer Diameter"> <br>
<input type="number" id="field_d6hwp" placeholder="Enter Thickness"> <br>
<input type="button" id="bttn" name="calculate" value="Calculate">

CodePudding user response：

I set the line-height to 50% and the top position to 50% so they'd counter each other inside the container to fit into the center. I tried several number combinations and it seems to work regardless of what I enter. I could have used a combination of relative and absolute positioning but you're already doing a lot of absolute positioning so I didn't want to make your code more complex if at all possible especially since the outcome is determined by dynamic values.

jQuery(document).ready(function($) {
  $(function() {

    $('.div3 span').hide();
    $('.div5').hide();
    $('.div5brother').hide();

    function hideObjects($) {
      $('.div1').hide();
      $('.div2').hide();
      $('.div3').hide();
    }

    function hideErrors($) {
      $('#error').hide();
      $('#error2').hide();
      $('#error3').hide();
      $('#error4').hide();
      $('#error5').hide();
    }

    $(document).on('change', '#field_2w269, #field_wg4s2, #field_d6hwp', function() {
      mainCode()
    })

    function mainCode() {
      const $multiplier = 7.5; //pixel sizing multiplier for user inputs
      //Declare Variables for User Inputs
      const $outer_diameter = parseFloat($("#field_wg4s2").val());
      const $wall_thickness = parseFloat($("#field_d6hwp").val());
      const $cutter_diameter = parseFloat($("#field_2w269").val());
      //Convert diameters to radii
      const $cutter_radius = ($cutter_diameter / 2);
      const $pipeOutsideRadius = ($outer_diameter / 2);
      const $pipeInsideRadius = ($pipeOutsideRadius - $wall_thickness);
      //Find Cutter Travel
      const $cutterTravel = ($pipeOutsideRadius - (Math.sqrt(Math.pow($pipeInsideRadius, 2) - Math.pow($cutter_radius, 2))));
      //Convert sizes for Visual Representation
      const $visualPipeOD = ($outer_diameter * $multiplier);
      const $visualWallThk = ($wall_thickness * $multiplier);
      const $visualPipeID = ($visualPipeOD - (2 * $visualWallThk));
      const $visualCutDia = ($cutter_diameter * $multiplier);
      const $visualCutTravel = ($cutterTravel * $multiplier);

      if ($cutter_diameter > $outer_diameter) {
        $('#error').text('Cutter cannot be larger than Pipe O.D.').show();
        hideObjects($);
        return false;
      }

      if ($visualCutDia > $visualPipeID) {
        $('#error2').text('Cutter cannot be larger than Pipe I.D.').show();
        hideObjects($);
        return false;
      }

      if ($cutter_diameter < 0) {
        $('#error').text('Please input a positive value').show();
        hideObjects($);
        return false;
      }

      if ($wall_thickness >= 0.33 * $outer_diameter) {
        $('#error4').text('Wall Thickness is invalid').show();
        hideObjects($);
        return false;
      }
      $('#error4').hide();


      if ($wall_thickness < 0) {
        $('#error3').text('Please input a positive value').show();
        hideObjects($);
        return false;
      }

      if ($outer_diameter < 0) {
        $('#error').text('Please input a positive value').show();
        hideObjects($);
        return false;
      }
      if ($cutter_diameter > 72) {
        $('#error').text('Cutter is too big.').show();
        hideObjects($);
        return false;
      }

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

      $('.div1').css({
        height: ($visualCutTravel),
        width: ($visualCutDia)
      });
      $('.div1').fadeIn(300);

      $('.div2').css({
        height: ($visualPipeOD),
        width: ($visualPipeOD),

      });
      $('.div2').fadeIn(300);

      $('.div3').css({
        height: ($visualPipeID),
        width: ($visualPipeID),

      });
      $('.div3').fadeIn(300);

      $('.div5').css({
        height: ($visualCutTravel),
        width: ($visualCutDia)
      });

      $('.div5brother').css({
        height: ($visualCutTravel),
        right: (102.5 - $visualCutDia / 2 - 80),
      });
      $('.div5brother').fadeIn(300);

      hideErrors($);
    }

    $(document).on('change', '#field_2w269', function() {
      $('.div1 span').fadeIn(100);
    })

    $(document).on('change', '#field_wg4s2', function() {
      $('.div3 span').fadeIn(100);
    })

    $(document).on('change', '#field_2w269', function() {
      $('.div5').fadeIn(100);
    })

  });
});

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

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

.div1 {
  border-top: 3px solid #0DA8AA;
  border-left: 1px solid #0DA8AA;
  border-right: 1px solid #0DA8AA;
  height: 0px;
  background: white;
}

.div2 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 0px;
  height: 0px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.div3 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 0px;
  height: 0px;
  background: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.div3>span {
  transform: translate(-10%, -55%) rotate(-45deg);
  font-size: 11px;
}

.div4 {
  border-top: 0.5px dashed black;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.div5 {
  border: 0.5px dashed black;
  width: 120px;
  height: 90px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  left: 50%;
}

.div5brother {
  position: absolute;
  top: 0;
  right: -80px;
  width: 80px;
  height: 50px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

.div5brother>span {
  font-size: 9px;
  display: block;
  position: absolute;
  line-height: 50%;
  top: 50%;
  right: -40px;
  text-transform: uppercase;
}

.div5container {
  width: 205px;
  height: 50px;
  position: absolute;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <p id="error"></p>
  <p id="error2"></p>
  <p id="error3"></p>
  <p id="error4"></p>
  <p id="error5"></p>
  <div ></div>
  <div >
    <div ><span>Pipe O.D.</span>

      <div >
        <div >
        </div>
        <div >
          <span>Min. Cutter Travel</span>
        </div>
      </div>
    </div>

    <div >
    </div>
  </div>
</div>

<input type="number" id="field_2w269" placeholder="Enter Cutter O.D."> <br>
<input type="number" id="field_wg4s2" placeholder="Enter Outer Diameter"> <br>
<input type="number" id="field_d6hwp" placeholder="Enter Thickness"> <br>
<input type="button" id="bttn" name="calculate" value="Calculate">

CodePudding user response：

The main issue here is because you're setting a fixed height on the .div5brother element, yet this is not affecting the height/line height of the child span.

To fix this you could remove that span and use flex positioning on the content within .div5brother:

.div5brother {
  /* other rules */
  font-size: 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-transform: uppercase;
}

That being said, there's a few other optimisations which can be made to your code.

Don't nest document.ready handlers. Use a single one.
Use CSS rules to hide elements when the page loads, not JS. This is to avoid a FOUC if the page loads slowly.
You don't need to pass a jQuery reference to the hideX() functions.
You don't need to wrap every numerical value/operation in parentheses. Remove them.
In addition, you can put common classes on the elements referenced in those functions to target them with a single selector.
For the error validation you can put all the errors in to an array and generate the p elements dynamically. This allows you much more freedom to show an unlimited number of errors, and maintain them much more simply.

With all that said, try this:

jQuery($ => {
  let hideObjects = () => $('.object').hide();
  let hideErrors = () => $('.error').hide();
  let showErrors = errors => $('.container').append(errors.map(msg => `<p >${msg}</p>`));

  $(document).on('change', '.field', mainCode);

  function mainCode() {
    const $multiplier = 7.5; //pixel sizing multiplier for user inputs
    const $outer_diameter = parseFloat($("#field_wg4s2").val());
    const $wall_thickness = parseFloat($("#field_d6hwp").val());
    const $cutter_diameter = parseFloat($("#field_2w269").val());
    //Convert diameters to radii
    const $cutter_radius = $cutter_diameter / 2;
    const $pipeOutsideRadius = $outer_diameter / 2;
    const $pipeInsideRadius = $pipeOutsideRadius - $wall_thickness;
    //Find Cutter Travel
    const $cutterTravel = $pipeOutsideRadius - (Math.sqrt(Math.pow($pipeInsideRadius, 2) - Math.pow($cutter_radius, 2)));
    //Convert sizes for Visual Representation
    const $visualPipeOD = $outer_diameter * $multiplier;
    const $visualWallThk = $wall_thickness * $multiplier;
    const $visualPipeID = $visualPipeOD - (2 * $visualWallThk);
    const $visualCutDia = $cutter_diameter * $multiplier;
    const $visualCutTravel = $cutterTravel * $multiplier;
    
    let validate = () => {
      let errors = [];
      $cutter_diameter > $outer_diameter && errors.push('Cutter cannot be larger than Pipe O.D.');
      $visualCutDia > $visualPipeID && errors.push('Cutter cannot be larger than Pipe I.D.');
      $cutter_diameter < 0 && errors.push('Please input a positive value');
      $wall_thickness >= 0.33 * $outer_diameter && errors.push('Wall Thickness is invalid');
      $wall_thickness < 0 && errors.push('Please input a positive value');
      $outer_diameter < 0 && errors.push('Please input a positive value');
      $cutter_diameter > 72 && errors.push('Cutter is too big.');
      $outer_diameter > 100 && errors.push($outer_diameter   " is too big");

      return {
        valid: errors.length === 0,
        errors: errors
      }
    }

    let updateUi = () => {
      $('.div1').css({
        height: $visualCutTravel,
        width: $visualCutDia
      }).fadeIn(300);

      $('.div2').css({
        height: $visualPipeOD,
        width: $visualPipeOD,
      }).fadeIn(300);

      $('.div3').css({
        height: $visualPipeID,
        width: $visualPipeID,
      }).fadeIn(300);

      $('.div5').css({
        height: $visualCutTravel,
        width: $visualCutDia
      }).fadeIn(300);

      $('.div5brother').css({
        height: $visualCutTravel,
        right: 102.5 - $visualCutDia / 2 - 80,
      });

      $('.div5container').fadeIn(300);
    }

    let validationResult = validate();
    if (!validationResult.valid) {
      hideObjects();
      showErrors(validationResult.errors);
    } else {
      updateUi();
    }
  }

  $(document).on('change', '#field_2w269', function() {
    $('.div1 span').fadeIn(100);
  })

  $(document).on('change', '#field_wg4s2', function() {
    $('.div3 span').fadeIn(100);
  })

  $(document).on('change', '#field_2w269', function() {
    $('.div5').fadeIn(100);
  })
});

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

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

.div1 {
  border-top: 3px solid #0DA8AA;
  border-left: 1px solid #0DA8AA;
  border-right: 1px solid #0DA8AA;
  height: 0px;
  background: white;
}

.div2 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 0px;
  height: 0px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.div3 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 0px;
  height: 0px;
  background: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.div3>span {
  display: none;
  transform: translate(-10%, -55%) rotate(-45deg);
  font-size: 11px;
}

.div4 {
  border-top: 0.5px dashed black;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.div5 {
  display: none;
  border: 0.5px dashed black;
  width: 120px;
  height: 90px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  left: 50%;
}

.div5brother {
  position: absolute;
  top: 0;
  right: -80px;
  width: 80px;
  height: 50px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  font-size: 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-transform: uppercase;
}

.div5container {
  display: none;
  width: 205px;
  height: 50px;
  position: absolute;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div ></div>
  <div >
    <div ><span>Pipe O.D.</span>
      <div >
        <div ></div>
        <div >Min. Cutter Travel</div>
      </div>
      <div ></div>
    </div>
  </div>
</div>

<input type="number" id="field_2w269"  placeholder="Enter Cutter O.D."> <br>
<input type="number" id="field_wg4s2"  placeholder="Enter Outer Diameter"> <br>
<input type="number" id="field_d6hwp"  placeholder="Enter Thickness"> <br>
<input type="button" id="bttn" name="calculate" value="Calculate">