JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="only-list" class="column">
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
    <li>Sixth</li>
    <li>Seventh</li>
    <li>Eighth</li>
    <li>Nineth</li>
    <li>Tenth</li>
</ul>

<div id="buttons">
    <button id="change-direction">Change direction</button>
    <button id="reduce-size">Reduce size</button>
</div>

CSS

#only-list {
    font-size: 175%;
    list-style: none none inside;
    position: absolute;
    left: 5px;
    top: 5px;
    border: solid 1px black;
    background-color: #eee;
    padding: 2px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}

.column {
    flex-direction: column;
    bottom: 5px;
    width: auto;
    transition: bottom 0.5s ease-in-out;
}

.row {
    flex-direction: row;
    right: 5px;
    height: auto;
    transition: right 0.5s ease-in-out;
}

.column.small {
    bottom: 60%;
}

.row.small {
    right: 60%;
}

#only-list > li {
    display: block;
    margin: 1px;
    border: solid 1px black;
    background-color: #fff;
    padding: 2px 8px;
}

#buttons {
    position: absolute;
    display: block;
    right: 5px;
    bottom: 5px;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    
    var changeDirection = document.getElementById('change-direction');
    var reduceSize = document.getElementById('reduce-size');
    var onlyList = document.getElementById('only-list');
    
    changeDirection.addEventListener('click', function() {
        if (onlyList.classList.contains('column')) {
            onlyList.classList.add('row');
            onlyList.classList.remove('column');
        } else {
            onlyList.classList.add('column');
            onlyList.classList.remove('row');
        }
    });
    
    reduceSize.addEventListener('click', function() {
        if (onlyList.classList.contains('small')) {
            onlyList.classList.remove('small');
            reduceSize.textContent = 'Reduce size';
        } else {
            onlyList.classList.add('small');
            reduceSize.textContent = 'Increase size';
        }
    });
    
});