Br tag doesn’t work with AppendChild() and display: flex

I am making a to-do list program where after every checkbox, there should be a new line. But the br function doesn’t work and I think it has to do with the CSS text, where the code is display: flex. Have a look:(Javascript)

document.addEventListener('DOMContentLoaded', () => {
const textareaEle = document.getElementById('j');
textareaEle.addEventListener('input', () => {
    textareaEle.style.height = 'auto';
    textareaEle.style.height = `${textareaEle.scrollHeight}px`;
});
function myFunction(){
const dif = document.getElementById("dif");
const div = document.getElementById("copy");
const sauce = document.getElementById("sauce")
const textareaEle = document.getElementById('j');
let checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox", "class", "checkbox");
let paragraph = document.createElement("p");
paragraph.setAttribute("class", "checkbox");
let konq = document.createTextNode(textareaEle.value);
let line = document.createElement("br");
paragraph.appendChild(konq);
sauce.appendChild(checkbox);
sauce.appendChild(paragraph);
sauce.appendChild(line);
}

CSS

#sauce{
display: flex;

}