Replicate an UI template - html

Question

I'm working on some HTML code for which I was given a UI. I tried to do most to make it look as close as possible. But I'm stuck with the header and line spacing pieces. Here is my code:
<div>
Hello, Alice! Here are your appointments for the day:
</div>
<div style="font-style:italic">
**All times are Arizona Time**
</div>
<table style="border:1px solid #e9e9e9">
<thead bgcolor="#8c8c8c" style="border-bottom:1px solid #e9e9e9; padding:none !important">
<tr>
<th style="width:auto">10:00AM - 10:30AM (30 MIN)</th>
<th style="width:auto; float:right">Abc</th>
</tr>
</thead>
<tbody>
<tr>
<td><div style="line-height:2em">
Topic:</div></td>
<td><div>Resume Review</div></td>
</tr>
<tr>
<td><div style="line-height:2em">Phone:</div></td>
<td>1234567890</td>
</tr>
<tr>
<td><div style="line-height:2em">Email:</div></td>
<td>abc#gmail.com</td>
</tr>
<tr>
<td><div style="line-height:2em">Student notes:</div></td>
<td>Hello,
My resume is pretty ugly, I built it based on what I learned in TAPS in military out-processing.
I will be standing by for the phone call, I missed my last one because I mixed up the appointment time zone.</td>
</tr>
</tbody>
</table>
Note: I need to use the inline styling, I can't use external CSS in my system.
Here is the UI provided:
How can I match the UI and also make it responsive?

Answer 1

Instead of using table for header, you can use div.
Check the below code.
<div>
Hello, Alice! Here are your appointments for the day:
</div>
<div style="font-style:italic">
**All times are Arizona Time**
</div>
<div style="border: 1px solid black">
<div style="width:100%; background-color:#8c8c8c; height:20px; display:flex;justify-content:space-between;align-items:center">
<p>10:00AM - 10:30AM (30 mins)</p>
<p>Data</p>
</div>
<table>
<tbody>
<tr>
<td>
<div style="line-height:2em">
Topic:</div>
</td>
<td>
<div>Resume Review</div>
</td>
</tr>
<tr>
<td>
<div style="line-height:2em">Phone:</div>
</td>
<td>1234567890</td>
</tr>
<tr>
<td>
<div style="line-height:2em">Email:</div>
</td>
<td>abc#gmail.com</td>
</tr>
<tr>
<td>
<div style="line-height:2em">Student notes:</div>
</td>
<td>Hello, My resume is pretty ugly, I built it based on what I learned in TAPS in military out-processing. I will be standing by for the phone call, I missed my last one because I mixed up the appointment time zone.</td>
</tr>
</tbody>
</table>
</div>