title: Creating like and dislike buttons in html and css
body: <p>I'm creating these two like and dislike buttons.</p>
  
  <p><a href="https://i.stack.imgur.com/MU7Ic.png" rel="nofollow"><img src="https://i.stack.imgur.com/MU7Ic.png" alt="enter image description here"></a></p>
  
  <p>I'm having an issue when I set the width of the buttons to <code>48%</code> to make them fill up the containing <code>div</code>, then they are displayed like the following.
  <a href="https://i.stack.imgur.com/baCgE.png" rel="nofollow"><img src="https://i.stack.imgur.com/baCgE.png" alt="enter image description here"></a> </p>
  
  <p>How can I display the circular <code>span</code> at the end like above? after setting the width to <code>48%</code>. </p>
  
  <p>code for the buttons.</p>
  
  <pre><code> &lt;button class="social-like" &gt;
       &lt;span class="like"&gt;&lt;i class="glyphicon glyphicon-thumbs-up"&gt;&lt;/i&gt;&lt;/span&gt;
       &lt;span class="count" &gt;0&lt;/span&gt;
   &lt;/button&gt;
      &amp;nbsp;
   &lt;button class="social-dislike" &gt;
       &lt;span class="dislike" &gt;0&lt;/span&gt;
       &lt;span class="like"&gt;&lt;i class="glyphicon glyphicon-thumbs-down"&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>my css</p>
  
  <pre><code>.social-like, .social-dislike {
      border: none;
      outline: none;
      font-size: 16px;
      /*width: 48%;*/
      background-color: #03A9F4;
      color: #fff;
  }
  
  .social-like {
      border-top-left-radius: 5px;
  }
  
  .social-dislike {
      border-top-right-radius: 5px;
  }
  
  .count, .like, .dislike {
      padding:10px;
  }
  
  .count, .dislike {
      background-color: #03A9F4;
      border-radius: 50%;
      font-size:12px;
  }
  
  .dislike {
      margin-left: -13px;
  }
  
  .count {
      margin-right: -10px;
  }
  </code></pre>
  
  <p>And also how can I make the like and dislike buttons to have a clickable effect?</p>
  
  <p><a href="https://jsfiddle.net/phutis/DTcHh/26208/" rel="nofollow">example on fiddle</a></p>