Displaying a vertical dashed line centrally in a div - html

Question

working on React with StyledComponents, each <div> in the below represents a different Styled Component.
Trying to achieve something like this:
But I ideally want to add the "dashed line" styles in the progress-indicator so that it it sits vertically below the indicator and spans the full height of wrapping-container. I've tried using ::before & ::after but with no success.
.wrapping-container {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.progress-indicator {
height: 22px;
width: 22px;
margin-right: 16px;
border-radius: 50%;
border: 1px solid rgb(255, 255, 255);
background: rgb(39, 40, 42);
color: rgb(255, 255, 255);
font-size: 13px;
text-align: center;
}
.input {
border: 1px solid #ced4da;
border-radius: 2px;
overflow-y: hidden;
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
}
<div class="wrapping-container">
<div class="progress-indicator">2</div>
<div class="input">Input</div>
</div>
<div class="wrapping-container">
<div class="progress-indicator">3</div>
<div class="input">Input</div>
</div>

Answer 1

The way I would do it is the following:
.wrapping-container {
position: relative;
display: flex;
}
.progress-indicator {
position: relative;
display: inline-block;
margin-bottom: 40px;
color: #fff;
}
.progress-indicator::after {
content: "";
width: 30px;
height: 30px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: -1;
}
.progress-indicator::before {
content: "";
height: 40px;
border: 1px dashed #000;
position: absolute;
left: 50%;
top: -50px;
transform: translateX(-50%);
z-index: -1;
}
.input {
margin-left: 30px;
}
<div class="wrapping-container">
<div class="progress-indicator">2</div>
<div class="input">Input</div>
</div>
<div class="wrapping-container">
<div class="progress-indicator">3</div>
<div class="input">Input</div>
</div>

Answer 2

A simple (if crude) way to achieve this:
.dasher {
border: 1px dashed #ced4da;
max-width: 0px;
min-height: 10px;
margin-left: 10px;
margin-top: -20px;
}
DEMO
.wrapping-container {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.progress-indicator {
height: 22px;
width: 22px;
margin-right: 16px;
border-radius: 50%;
border: 1px solid rgb(255, 255, 255);
background: rgb(39, 40, 42);
color: rgb(255, 255, 255);
font-size: 13px;
text-align: center;
}
.input {
border: 1px solid #ced4da;
border-radius: 2px;
overflow-y: hidden;
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
}
.dasher {
border: 1px dashed #ced4da;
max-width: 0px;
min-height: 10px;
margin-left: 10px;
margin-top: -20px;
}
<div class="wrapping-container">
<div class="progress-indicator">2</div>
<div class="input">Input</div>
</div>
<div class="dasher"></div>
<div class="wrapping-container">
<div class="progress-indicator">3</div>
<div class="input">Input</div>
</div>
Should give you this:

Answer 3

I added a container and a single dashed block that will go directly through all the height wrapping-container:
.container{
position:relative;
}
.border-dash{
position: absolute;
top: 15px;
left: 11px;
border-left: 1px dashed black;
height:calc(100% - 25px);
width: 1px;
display: block;
z-index: -1;
}
DEMO
.wrapping-container {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.progress-indicator {
height: 22px;
width: 22px;
margin-right: 16px;
border-radius: 50%;
border: 1px solid rgb(255, 255, 255);
background: rgb(39, 40, 42);
color: rgb(255, 255, 255);
font-size: 13px;
text-align: center;
}
.input {
border: 1px solid #ced4da;
border-radius: 2px;
overflow-y: hidden;
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
}
.container{
position:relative;
}
.border-dash{
position: absolute;
top: 15px;
left: 11px;
border-left: 1px dashed black;
height:calc(100% - 25px);
width: 1px;
display: block;
z-index: -1;
}
<div class="container">
<span class="border-dash"></span>
<div class="wrapping-container">
<div class="progress-indicator">2</div>
<div class="input">Input</div>
</div>
<div class="wrapping-container">
<div class="progress-indicator">3</div>
<div class="input">Input</div>
</div>
<div class="wrapping-container">
<div class="progress-indicator">4</div>
<div class="input">Input</div>
</div>
</div>