How to make responsive lines in path shape - html

Question

I have these path lines, the form is okey with 2k res. and full hd but on other devices (smaller, bigger) the shape will not move responsive. Is there a way to make my code responsive or is there a more efficient way to do this.
Wished shape:
.line {
display: flex;
align-items: center;
}
.line span:first-child {
white-space: nowrap;
}
.line b {
flex: 1 0 0;
height: 5px;
background: black;
margin: 0 5px;
min-width: 25px;
}
.line1 {
position: absolute;
width: 5.2%;
left: 36.2vw;
top: 31.9%;
}
.line2 {
position: absolute;
width: 15%;
left: 40vw;
top: 20%;
}
.line3 {
position: absolute;
width: 15%;
left: 40vw;
top: 45%;
}
.line4 {
position: absolute;
width: 26.1vh;
left: 33.5%;
top: 32.5%;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
<p class="line line1"><span></span><b></b>
<p class="line line2"><span></span><b></b>
<p class="line line3"><span></span><b></b>
<p class="line line4"><span></span><b></b>

Answer 1

The general idea is to wrap all your lines into a relative container with height and width, so your lines are positioned according to their container. If your container is, in this case, the whole page, you will experiance those issues. I have put together some quick example.
.container {
position: relative;
height: 500px;
}
.container p {
margin: 0;
}
.line {
position: absolute;
background: black;
}
.line1 {
width: 75%;
height: 5px;
bottom: 0;
right: 0;
}
.line2 {
width: 25%;
height: 5px;
top: 50%;
left: 0;
}
.line3 {
width: 75%;
height: 5px;
right: 0;
}
.line4 {
position: absolute;
height: 500px;
width: 5px;
left: 25%;
}
<div class="container">
<p class="line line1"><span></span><b></b>
<p class="line line2"><span></span><b></b>
<p class="line line3"><span></span><b></b>
<p class="line line4"><span></span><b></b>
</div>
Please note that you will need to play a bit with the values in order to achieve the exact result as you want.