Botão ficou acima da lista

Meu botão ficou acima do item da lista e não na mesma linha, assim como o do professor. O que fiz errado?

const criarTarefa = (evento) => { 

    evento.preventDefault();

    const lista = document.querySelector('[data-list]');
    const input = document.querySelector('[data-form-input]');
    const valor = input.value;
    console.log( valor  );

    const tarefa = document.createElement('li');
    tarefa.classList.add('task');
    const conteudo = '<p class="content">' + valor + '</p>';

    tarefa.innerHTML = conteudo;
    lista.appendChild(BotaoConclui());
    lista.appendChild(tarefa);

    input.value = " ";
};

const novaTarefa = document.querySelector('[data-form-button]');

novaTarefa.addEventListener('click', criarTarefa);

const BotaoConclui =() => {
    const botaoConclui = document.createElement('button');

    botaoConclui.classList.add('check-button');
    botaoConclui.innerText = 'concluir';

    botaoConclui.addEventListener('click', ()=> {
        console.log('fui clicado');
    });

    return botaoConclui
}