JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div><label>Microsoft</label></div>
<div><label>Apple</label></div>
<div><label>Nokia</label></div>
<div><label>Windows Phone</label></div>
<div><label>Android</label></div>
<div><label>Windows 8</label></div>
<div><label>Windows Mobile</label></div>
<div><label>Intel</label></div>
<div><label>AMD</label></div>
</div>
CSS
.container{
width: 300px;
height: auto;
float: left;
position: relative;
}
.container div{
width: 100%;
height: 30px;
border-bottom: solid 1px #999;
}
JavaScript
var itms_ind = 8;
for (i = 0; i <= itms_ind; i++) {
var first = $('.container div label:eq(0)');
var first_char1_int = first.text().substr(0, 1).toLowerCase().charCodeAt();
var first_char2_int =
first.text().substr(first.text().indexOf(' ') + 1, 1).toLowerCase().charCodeAt();
for (j = 0; j <= itms_ind; j++)
{
$('.container div label').each(function() {
var current = $(this);
var current_char1_int = current.text().substr(0, 1).toLowerCase().charCodeAt();
var current_char2_int = current.text().
substr(current.text().indexOf(' ') + 1, 1).toLowerCase().charCodeAt();
if ((current_char1_int < first_char1_int)){
first.parent().before(current.parent());
} else
if ((first_char1_int == current_char1_int)){
if (first_char2_int < current_char2_int)
current.parent().after(first.parent());
}
});
}
}