Basic HTML Code for Map Tips

Question

I'm trying to get map tips to behave as shown below.

• Light grey background with very thin white border
• A box that adjusts to the content rather than a fixed width of say...300px
• A centred title using h1 or h2
• Name, company and email in bold with the details all inline with each other (dependant on the longest word in bold).
• A small white space
• More details in bold with information on the same line not in bold

I'm struggling with aligning [% "Client Name" %] etc to the longest input (shown as "COMPANY NAME") and keeping the bold and normal text on one line.

Current code used:

<style>
  body {background-color: lightgrey!important; text-size: 15px; text-style: bold;}
  h1 {text-align: center; text-style: underline;}
  h4 {width: 500px; margin-left: 20px;}
</style>
<h1> ASSET </h1>
<h4>NAME: [% "First Name" %]   [% "Surname" %] </h4>
<h4>COMPANY NAME:  [% "Company Na" %]</h4>

Progress Report: Transformed into table format

<style>

body {background-color: #dddddd!important; font-family: sans-serif;}

table {border-collapse: collapse;}

tr {border: 2px solid white;}

td {white-space: nowrap; padding: 5px;}

td.bold {font-weight: bold;}

td.gap {background-color:white;padding:1px;}

</style>


<table style="width:100%">
<th colspan=1><h1>ASSET</h1></th>
<tr><td class="bold">NAME:</td><td> [% "First Name" %] [% "Surname" %] </td></tr>
<tr><td class="bold">COMPANY NAME:</td><td> [% "Company Na" %] </td></tr>
<tr><td class="gap"></td><td class="gap"></td></tr>
<tr><td class="bold">MANAGEMENT DATE:</td><td>[% "Mangement" %]</td></tr>
</table>

Answer 1

Use a table:

<table>
<th colspan=2><h1>ASSET</h1></th>
<tr><td class="bold">NAME:</td><td>[% "First Name" %]   [% "Surname" %]</td></tr>
<tr><td class="bold">COMPANY NAME:</td><td>[% "Company Na" %]</td></tr>
[...]
</table>