I am trying to recreate this graphic in CSS/HTML and am having trouble using the right positioning code to have this 2 sided border which is supposed to be the "Min. Cutter Travel" label, positioned next to the dashed-line rectangle as so. Additionally, I would like to know how to have the "Min. Cutter Travel" text positioned next to the 2 sided border.
Additionally, I am using this code along with some jQuery JS code as all these shapes are dynamically changing size based on user input.
This is what I have so far (Static Code): jsFiddle: https://jsfiddle.net/Kaevonz/mowahL2v/167/
Dynamic Code: https://jsfiddle.net/Kaevonz/dr7o1k3p/3/
.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: 60px;
width: 205px;
background: white;
}
.div2 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 290px;
height: 290px;
background: white;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.div3 {
border: 1px solid #0DA8AA;
border-radius: 50%;
width: 280px;
height: 280px;
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: 205px;
height: 50px;
position: absolute;
top: 0;
transform: translateX(-50%);
left: 50%;
}
.div6 {
border-top: 0.5px solid black;
border-bottom: 0.5px solid black;
width: 100px;
height: 50px;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3"><span>Pipe O.D.</span>
<div class="elem div5">
</div>
<div class="elem div4">
</div>
</div>
</div>
<div class="elem div6">
</div>
</div>