JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list" data-layout="vertical">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>
<br>
<br>
<button id="toggle">Toggle Layout</button>

CSS

[data-layout="horizontal"] li {
    display: inline;
    padding: 0 10px;
    background-color: "yellow"
}

JavaScript

document.getElementById('toggle').addEventListener('click',function(){
    var list = document.getElementById('list');
    if(list.dataset.layout == 'vertical'){
        list.setAttribute("data-layout",'horizontal');
    } else {
        list.setAttribute("data-layout",'vertical');
    }
    
});