CSS - float:left not pushing div away/working properly - html

Question

I have two div's next to each other but I cannot seem to get float: left to work properly and achieve what I want. Every time, the left div will still cut into/overlap onto the right div like so (This the dynamic version of my code with some jQuery code which changes the size of the divs based on user input): https://gyazo.com/b373205412f4ba18f32dad0f3cf877d2
Here is the static version of my code where I change the width/height manually. As you can see I have float: left on div5brother, but div5 still overlaps onto it. jsFiddle: https://jsfiddle.net/Kaevonz/92etqaxk/10/
This is what I am trying to recreate:
.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);
}
.div5container {
width: 205px;
height: 50px;
position: absolute;
top: 0;
}
.div5 {
border: 0.5px dashed black;
width: 235px;
height: 50px;
top: 0;
transform: translateX(-50%);
left: 50%;
position: absolute;
}
.div5brother {
position: absolute;
top: 0;
right: -80px;
width: 80px;
height: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
float: left;
}
.div5brother > span {
font-size: 9px;
line-height: 50px;
display: block;
position: absolute;
right: -40px;
text-transform: uppercase;
}
<div class="container">
<div class="elem div1"></div>
<div class="elem div2">
<div class="elem div3"><span>Pipe O.D.</span>
<div class="div5container">
<div class="elem div5">
</div>
<div class="elem div5brother">
<span>Min. Cutter Travel</span>
</div>
</div>
<div class="elem div4">
</div>
</div>
</div>
</div>

Answer 1

As far as I can see the overlapping is due to you making the div5 element 30px wider than its container. I changed its width from width: 235px; to width: 205px; and the overlapping is gone and it seems to match the image. Here is a JSFiddle with my changes.