Aidez moi pour mon codage devis wordpress svpl ^^'

Je recherche a bien mettre en forme mon devis a travers le code mais je n'est pas les connaissance pour le faire

"<img class="show-onprint" src="https://i0.wp.com/lesterrassiers.wpcomstaging.com/wp-content/uploads/2021/11/cropped-capture-decc81cran-2021-09-09-acc80-10.23.20.png?fit=1507%2C318&amp;ssl=1">
<div style="background: white; border-radius: 5px; padding: 30px">

<span>Nom</span><input type="text">
<span>Prénom :</span><input type="text">
<span>Téléphone :</span><input type="text">
<span>Mail du client :</span><input type="text">
<span>Adresse du client :</span><input type="text">
<span>Adresse du chantier :</span><input type="text">
<p class="smart_input hide-onprint"> <span>Raccordement en eau / électricité / Télécom (Quantité de mètre linéaire)</span> <input class="input" data-multiply="50" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Assainissement collectif (Quantité de mètre linéaire)</span> <input class="input" data-multiply="21" data-add="200" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Chemin d'acces (Quantité de mètre linéaire)</span> <input class="input" data-multiply="88" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Evacuation des terres (environ 1m3 /m² terrassé)</span> <input class="input" data-multiply="31" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Assainissement individuel Micro Station (1ère option) Unité</span> <input class="input" data-multiply="8000" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Assainissement individuel Fosse Septique (2ème option) Unité</span> <input class="input" data-multiply="7800" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Assainissement collecif (Mètre linéaire)</span> <input class="input" data-multiply="200" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Pourtour maison (Moins de 100 m²) Forfait</span> <input class="input" data-multiply="510" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Pourtour maison (Entre 100 m² et 150m²) Forfait</span> <input class="input" data-multiply="820" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Pourtour maison (Plus de 150m²) Forfait</span> <input class="input" data-multiply="1100" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Aplanissement des Terres (Maison de moins de 100 m²) Forfait</span> <input class="input" data-multiply="710" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Aplanissement des Terres (Maison entre 100 m² et 150 m²) Forfait</span> <input class="input" data-multiply="1080" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Aplanissement des Terres (Maison plus de 150 m²) Forfait</span> <input class="input" data-multiply="1300" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Abatage désouchage d'arbres (Unité)</span> <input class="input" data-multiply="310" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Raccordement pluviale (Mètre linéaire)</span> <input class="input" data-multiply="24" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Puits de perte (Unité)</span> <input class="input" data-multiply="980" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Cuve de rétention des eaux de pluies (Unité)</span> <input class="input" data-multiply="2680" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Cuve de rétention des eaux usées (Unité)</span> <input class="input" data-multiply="2980" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p class="smart_input hide-onprint"> <span>Busage de fossé (Mètre linéaire)</span> <input class="input" data-multiply="205" data-add="0" type="number" value="0" min="0">
<span class="output append-euro-sign">0</span></p>
<p style="border-radius: 5px; background: #eee; border: 1px solid #eee; padding: 20px">
<span>Total HT : </span><span id="smart_total_ht" class="append-euro-sign">0,00</span>
<span>Total TTC : </span><span id="smart_total_ttc" class="append-euro-sign">0,00</span>
<button style="margin-top:20px" onclick="window.print()" class="hide-onprint">Imprimer ce devis</button></p>

</div>
<style>.append-euro-sign::after{content: " €";}.show-onprint{display: none} @media print{footer, .hide-onprint, .launch-banner-wrapper{display: none}.show-onprint{display: inline-block} .post-inner, header{padding: 0 !important;}}</style><script>let smartInputList=document.querySelectorAll(".smart_input"); smartInputList.forEach(dom=>{let input=dom.querySelector(".input"), output=dom.querySelector(".output"); input.addEventListener("change", ()=>{output.innerHTML=(Number.parseInt(input.value) * Number.parseInt(input.getAttribute("data-multiply"))) + Number.parseInt(input.getAttribute("data-add")); if (input.value==0){dom.classList.add("hide-onprint"); output.innerHTML=(0.0).toFixed(2).toString().replace('.', ',');}else{dom.classList.remove("hide-onprint")}document.querySelector("#smart_total_ht").innerHTML=[...smartInputList].map(el=> Number.parseInt(el.querySelector(".output").innerHTML)).reduce((prev=0, curr)=> prev + curr).toFixed(2).toString().replace('.', ','); document.querySelector("#smart_total_ttc").innerHTML=([...smartInputList].map(el=> Number.parseInt(el.querySelector(".output").innerHTML)).reduce((prev=0, curr)=> prev + curr) * 1.2).toFixed(2).toString().replace('.', ',');})})</script>"

**Ce que je veux**

Avoir les demande d'information relatif au client en plus petit et a droite de la page
Avoir les différent service proposé sur différente collonne 
En gros la mise en page est actuellement peut intuitive et pas jolie a voir pour les cients et  ou proffessionel 
Une notification sur ladresse mail du site a chaque impression du devis.
**Ce que j'obtiens**

Une mise en page facile d'utilisation et intuitive que tout le monde comprend facilement 
merci a ceux qui pourront m'aider ^^