title: three circles in a line with equal spacing
body: <p>I have a design which I am trying to replicate in HTML and CSS.</p>
  
  <p><a href="https://i.stack.imgur.com/NzLhI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NzLhI.png" alt="enter image description here"></a></p>
  
  <p>At this moment, I am able to get this in <a href="https://jsfiddle.net/Lh5m11ya/1/embedded/result/" rel="nofollow noreferrer">fiddle</a>. </p>
  
  <p>I am wondering how I can make the above three circles in a row with equal spacing in each of them in my fiddle as shown exactly in the design.  I tried using, </p>
  
  <pre><code>&lt;span class="circle"&gt;&lt;/span&gt;
  
  .circle:before {
    content: ' \25CF';
    font-size: 200px;
  }
  </code></pre>
  
  <p>And,</p>
  
  <pre><code>#circle {
      background: #f00;
      width: 200px;
      height: 200px;
      border-radius: 50%;
  }
  </code></pre>
  
  <p>But unfortunately, I was not able to get the same design in my above fiddle. </p>