Spend much time but can't solve it. My CSS is OK. But why it is printing line by line in innerHTML? I am using an async function to get the data.
1st Function

const deploySnipCard = (getSnip) => {
    for (x in getSnip) {
        const tech = getSnip[x].tech;
        const tags = getSnip[x].tags;
        const tagsUrl = getSnip[x].tagsUrl;
        const status = getSnip[x].status;
        const imgSrc = getSnip[x].imgSrc;
        const imgUrl = getSnip[x].imgUrl;
        const caption = getSnip[x].caption;
        appendCard(tech, tags, tagsUrl, status, imgSrc, imgUrl, caption);
    }
};

2nd Function

const appendCard = (tech, tags, tagsUrl, status, imgSrc, imgUrl, caption) => {
    const mainDiv = document.getElementById("root");
    mainDiv.innerHTML += `
    <div class="col-12 col-lg-4 col-md-6">
        <div class="snip-card mt-5 p-2">
            <div class="d-flex justify-content-between">
                <div>
                    <span class="badge bg-primary mb-2">${tech}</span>
                    <a href="${tagsUrl}">
                    <span class="badge bg-danger mb-2 mx-1">${tags}</span></a>
                </div>
                <div>
                    <span class="badge bg-success mb-2">${status}</span>
                </div>
            </div>
            <a href="${imgUrl}">
                <div class="bg-dark">
                    <img class="card-img img-fluid" alt="click here" loading="lazy"
                        src="${imgSrc}">
                </div>
            </a>
            <p class="snip-card-cap my-2">${caption}</p>
        </div>
    </div>`;
};

Output:

Expected Output: