How to show up/down voting item like Reddit? - html

Question

I am trying to get a similar look like Reddit or HackerNews voting where up/down arrows are get stacked. What I tried rather gives me following look:
My Code is given below:
HTML
<ul class="list-unstyled">
<li class="entry">
<div class="row">
<div class="col-sm-2 entry__rank">
<span class="pull-left">1.</span>
<i class="fa fa-icon fa-caret-up fa-2x pull-left"></i>
<i class="fa fa-icon fa-caret-down fa-2x pull-left"></i>
</div>
<div class="col-md-9">
<span class="entry__title">
This is a great billboard
</span>
</div>
</div>
</li>
</ul>
CSS
.entry {
padding: 5px;
margin-bottom: 20px;
}
.entry__rank {
font-size: 20px;
font-weight: bold;
color: grey;
padding: 5px 0 5px 0;
margin-top: -10px !important;
}
.entry__title {
font-weight: bold;
font-family: Helvetica Neue, Helvetica, Arial;
font-size: 16px;
}
.entry__title a {
color: #285ddf !important;
}
Desired Look
Event something like Stackover flow voting would work.

Answer 1

Edited to provide a better plugin:
Using the following will probably be a better and less bloated solution:
https://github.com/janosgyerik/upvotejs
Reddit actually has their code available for people to take and basically create their own Reddit clone if they wanted:
https://github.com/reddit/reddit
Look through this and you'll probably find exactly what you're looking for.

Answer 2

U can use html button and any javascript variable to display the count.
In the button tag add onclick property and call a JavaScript method which increases the variable value on click of button
Similar approach for down count just decrease the value in the method
https://codeshare.io/Xv5xB

Answer 3

Use bootstrap lib [http://getbootstrap.com/] which has more features & follow this code.
<div className = "row">
<div className = "u-full-width u-cf link-item">
<div className = "u-pull-left link-vote">
<div className = "u-pull-left vote-buttons">
<div className = "arrow-up upvote" onClick={this._onVoteUp}></div>
<div className = "arrow-down downvote" onClick= {this._onVoteDown}></div>
</div>
<span className="points">{this.state.points}</span>
</div>
<div className="u-pull-right link-content" onClick={this._onLineClick}>
{this.props.title}
<span className="u-pull-right info">{domain}</span>
</div>
</div>
</div>
Write method for UpVote , DownVote & etc.