title: Two Circles side by side (responsive)
body: <p>I am trying to make two circles appear side by side (responsive).</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="col-sm-12"&gt;
    &lt;div class="circle col-sm-6"&gt;450 reviews&lt;/div&gt;
    &lt;div class="circle col-sm-6"&gt;4.2 million readers&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.circle{
    width:100px;
    height:100px;
    border-radius:100px;
    font-size:20px;
    color:#fef;
    line-height:100px;
    text-align:center;
    background:#000
  }
  </code></pre>
  
  <p>But with this CSS, the circles are below each other.</p>
  
  <p>Inside the circle, is it also possible to have "450" in one line and "reviews" below it. Similarly "4.2 million" in one line and "readers" in another?</p>
  
  <p><a href="http://jsfiddle.net/rkEMR/9393/" rel="nofollow noreferrer">Live Demo</a></p>