Align Text and Image in Div Created in Javascript

I’m trying to create a div in JS with an image on the left and a text that can dynamically change on the right.

Something like this: [IMAGE] “text”

This is what I have so far, but the text still appears beneath the image. Thanks in advance.

let img = document.createElement("img");
img.src = "https://via.placeholder.com/50";
img.id = "icon"
img.style.display = "flex";
img.style.alignItems = "center";
img.setAttribute("height", "76.8");
img.setAttribute("width", "76.8");

let textSpan = document.createElement("span")
textSpan.id = "Count"
textSpan.style.padding = "10px"
textSpan.innerHTML = "x0"

let CountDiv = document.createElement('div')
CountDiv.id = "CountDiv"
CountDiv.style.position = 'absolute';
CountDiv.style.top = 400 + 'px';
CountDiv.style.left = 200 + 'px';
CountDiv.style.background = "white"
CountDiv.append(img)
CountDiv.append(textSpan)

document.body.appendChild(CountDiv)

Answer

Figured it out. Flex needs to be on the container and not the image.

let img = document.createElement("img");
        img.src="img.png";
        img.id="icon"

        //Flex Should be set on div not Image

        img.setAttribute("height", "76.8");
        img.setAttribute("width", "76.8");

let textSpan=document.createElement("span")
        textSpan.id = "Count"
        textSpan.style.padding="10px"
        textSpan.innerHTML="x0"

let CountDiv = document.createElement('div')
        CountDiv.id= "CountDiv"
        CountDiv.style.position = 'absolute';
        CountDiv.style.top = 400 + 'px';
        CountDiv.style.left = 200+'px';
        CountDiv.style.background="white"
        CountDiv.append(img)
        CountDiv.append(textSpan)

        //These         
        CountDiv.style.display ="flex";
        CountDiv.style.alignItems="center";

 document.body.appendChild(CountDiv)