JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <ul id="inner">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2 with long text</a></li>
        <li><a href="#">Button 3</a></li>
    </ul>
</div>

CSS

#outer {
    float: right;
    position: relative;
    left: -50%;
}

#inner {
    position: relative;
    left: 50%; 
    
    margin: 0;
    padding: 0;
}

#inner > li {
    float: left;
    
    list-style: none;
    margin: 0;
    padding: 0;
}


#inner > li > a {
  padding: 1em;
  margin: 1em;
  outline: 1px solid blue;
}