JSFiddle - React, Tailwind, and code Playground
HTML
<div class="grid_6 alpha">some content is here</div>
<div class="grid_14 omega clearfix">
<div class="paginationDiv">
<ul id="paginationLinks"><li class="previoius"><a href="http://server/plussizelingerie/Lingerie-c-15.html?page=1&sort=8a" class="pageResults" title=" Previous Page "><u>[<< Prev]</u></a></li><li><a href="http://server/plussizelingerie/Lingerie-c-15.html?page=1&sort=8a" class="pageResults" title=" Page 1 "><u>1</u></a></li><li class="active"><strong>2</strong></li><li><a href="http://server/plussizelingerie/Lingerie-c-15.html?page=3&sort=8a" class="pageResults" title=" Page 3 "><u>3</u></a></li><li><a href="http://server/plussizelingerie/Lingerie-c-15.html?page=4&sort=8a" class="pageResults" title=" Page 4 "><u>4</u></a></li><li class="extraNext"><a href="http://server/plussizelingerie/Lingerie-c-15.html?page=5&sort=8a" class="pageResults" title=" Next Set of 4 Pages ">...</a></li><li class="next"><a href="http://server/plussizelingerie/Lingerie-c-15.html?page=3&sort=8a" class="pageResults" title=" Next Page "><u>[Next >>]</u></a></li></ul> </div>
</div>
CSS
div.paginationDiv{
float: right;
}
div.paginationDiv ul{
right: 0;
border:0;
margin:0;
padding:0;
list-style: none;
}
#paginationLinks li{
border:0; margin:0; padding:0;
font-size:10px;
list-style:none;
}
#paginationLinks a{
border:solid 1px #DDDDDD;
margin-right:2px;
}
#paginationLinks .previous-off,
#paginationLinks .next-off {
color:#666666;
display:block;
float:left;
font-weight:bold;
padding:3px 4px;
}
#paginationLinks .previous a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#paginationLinks .next a {
font-weight:bold;
border:solid 1px #FFFFFF;
}
#paginationLinks .active{
color:#ff0084;
font-weight:bold;
display:block;
float:left;
padding:4px 6px;
}
#paginationLinks a:link,
#paginationLinks a:visited {
color:#0063e3;
display:block;
float:left;
padding:3px 6px;
text-decoration:none;
}
#paginationLinks a:hover{
border:solid 1px #666666;
}