JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<ol class="mini-form pager-pages">
<li>
<a href="...">1</a>
</li>
<li>
<a href="...">2</a>
</li>
<li>
<a href="...">3</a>
</li>
</ol>
<form action="..." method="get">
<ol class="mini-form pager-result">
<li>
<select name="PageSize">
<option value="5">5</option>
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
</select>
</li>
<li>
per page
</li>
<li>
<input type="submit" value="Set" />
</li>
</ol>
</form>
</div>
CSS
ol, li, form {
display: inline-block;
}
ol.mini-form {
margin: 0;
padding: 0;
}
ol.pager-pages {
margin: 0.5em 0;
padding: 0.5em 0;
width: 48%;
}
ol.pager-pages li {
padding: 0.4em;
margin: 0.1em;
border: 1px solid #ccc;
text-align: center;
}
form {
width: 45%;
text-align:right;
}
ol.pager-result {
padding: 0.4em;
}