JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flow">
<div id="circle1" class="circle"></div>
<div class="line"> </div>
<div id="circle2" class="circle"></div>
</div>

CSS

.flow {
	height: 5em;
	left: -0.3em;	
}

.flow div:first-child {
	left: 0em;	
}

.circle {
border-radius: 50%;
display: inline-block;
background: green;
width: 2.5em;
height: 2.5em;
box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
position: relative;
left:inherit;
}

.line {
display: inline-block;
background: green;
height: 0.5em;
width: 300px;
position: relative;
margin-bottom: 1.0em;
box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
-moz-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
-webkit-box-shadow: 0px 0px 10px 4px rgba(50, 160, 45, 0.75);
left:inherit;