JSFiddle - React, Tailwind, and code Playground

by moalla

HTML

<ul id="mylist">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
</ul>
<ul id="grouped_buttons" style="position: relative;">
    <li>play</li>
    <li>stop</li>
    <li>pause</li>
</ul>

CSS

#mylist li, #grouped_buttons {
display: inline;
padding: 5px;
background: #F8F8F8;
border: 1px solid lightgray;
}
#grouped_buttons li {
display: inline;
}

JavaScript

$('#mylist li').click(function(){
    var newleft = $(this).offset().left-(106/2);
    $('#grouped_buttons').css('left',newleft);
});