I want to make a list that has 3 li elements ordered horizontally. These show up thanks to a function. But when triggering this function again I want the new li elements to show up below the last ones, in a vertical way like a regular list. I managed to get the 3 li in ordered horizontally but can't find a way to make it work like a vertical list. A new entry for the list shows up right next to the last one instead of below it.

Explaining my JS code: I appended all three li elements with a delete button to delete that full entry that contains all 3 li.

What I got:

CSS

.list {
list-style: none;
text-align: center;
}

.list li {
display: inline;
}

JS

const btn = document.createElement('button');
btn.type = 'button';
btn.textContent = 'X';
btn.addEventListener("click", (e) => deleteExpense(e));

const li3 = document.createElement('li');
li3.textContent = `${amount}`;

const li2 = document.createElement('li');
li2.textContent = `${date}`;
li2.appendChild(li3);

const li1 = document.createElement('li');
li1.textContent = `${place}`;
li1.appendChild(li2);

li1.appendChild(btn);

list.appendChild(li1);