Dynamic DOM Element Creation :

In HTML

1. Create parent div
   

    <!---------------  Parent div -------------->
    <div id="parent" class="card m-5 mx-auto" >
        <h1>Hello Template</h1>
    </div>

1. Create template:
   

<!----------------- Template tag ------------>
    <template id="template">
        <div class="card d-flex">
            <img id="temp-img" src="https://picsum.photos/id/293/100/100" alt="smth">
            <h1>Template title</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, architecto dolor eius fugiat incidunt ipsa iure iusto officiis recusandae rerum!</p>
        </div>
    </template>

In CSS:

#parent{
    width: 43%;
}
.card {
    width:500px;
    padding: 20px;
}
.card h1{
    font-size: 50px;
}
#temp-img {
    margin: 0 auto;
    width: …

auto card class create css dom dynamic element flex hello html javascript tag template