'How can i change text position on sweetalert box?

I'm trying to place text to the left of my sweetalert box. How can i do it please?

Picture in attache, i would like to place text bordered to the left. Actual view

My script:

    Swal.fire({
    title:'<strong>Info produit : '+data.id+'</strong>',
    type: 'info',
    html: '<b>Designation : </b>'+data.designation+'<br><b>Unite : </b>'+data.unite+'<br><b>Prix : </b>'+data.prix+'<br><b>Categorie : </b>'+data.categorie+'<br><b>Sous Categorie : </b>'+data.sous_categorie+'<br><b>Fournisseur : </b>'+data.fournisseur+'<br><b>Statut : </b>'+data.statut,
    showCancelButton: false,
                    })


Solution 1:[1]

Swal.fire({
  html: '<div class="align-left">text aligned left</div>',
})
.align-left {
  text-align: left;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1