Creating like and dislike buttons in html and css
<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>