Horizontal line in the middle of divs
<p>I want to make a line in the middle of the divs. In the following image, the line should be in the middle of the red boxes.</p>

<p><a href="https://i.stack.imgur.com/ERI2W.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ERI2W.png" alt="enter image description here"></a></p>

<p>I'm trying to do that using the line height, but not able to. </p>

<p>Here's the code:</p>

<p><strong>HTML/CSS:</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.wrap {
  text-align: center;
  margin: 20px;
}
.links {
  padding: 0 10px;
  border-top: 1px solid #000;
  height: 1px;
  line-height: 0.1em;
}
.dot {
  width: 20px;
  height: 20px;
  background: red;
  float: left;
  margin-right: 150px;
  position: relative;
  top: -10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
  &lt;div class="links"&gt;
    &lt;div class="dot"&gt;&lt;/div&gt;
    &lt;div class="dot"&gt;&lt;/div&gt;
    &lt;div class="dot"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>Demo:</strong>
<a href="https://jsfiddle.net/nkq468xg/" rel="noreferrer">https://jsfiddle.net/nkq468xg/</a></p>