email Template design - html

Question

I am working with an email template Design. my issue is that if you see the design there is an element with "P" , there is vertical black line above and below "P", but issue is the line doesn't join with other "P" line. the content in the white background part is dynamic, so i can't fix the height.
My question is how can I overcome this issue.
Please Help me. Thanks In advance.
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; font-weight:normal;">September 23</h1>
</td>
</tr>
</tbody>
</table>
<!--time-->
<table width="600" cellspacing="0" cellpadding="0" colspan="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; background-color:#E7EBED;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<table width="600" cellspacing="0" cellpadding="0" border="0" colspan="0" align="left" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<!--row1-->
<tr>
<td align="center" width="20%" style="color:#000; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:25px 10px;">
<p style="color:#666;margin:0px;padding-left: 20px;">08:00</p>
</td>
<td width="10%">
<span style="width:3px; background-color:#2C3840; margin-left: 18px; margin-top: -48px;"> </span>
<p style="background-color:#EF7247;width:35px;margin:0px; height:35px; line-height: 35px;text-align: center;border:3px solid #2C3840; border-radius:50%;">P</p>
<span style="width:3px; background-color:#2C3840; margin-left: 18px; margin-top: -48px;"> </span>
</td>
<td align="center" width="60%" style="color:#000; font-family:Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; text-align:left;">
<table cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 4%;">
<tbody>
<tr>
<td><img src="http://alialamshahi.com/themes/eventify/images/tri_left.png"></td>
<td><h4 style="background-color:#fff;border-radius:10px; padding:15px; color:#2C3840;margin:0px;"> Pre-Party <strong style="color:#999;">Sponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere Labs</strong> </h4></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!--row1-->
<tr>
<td align="center" width="20%" style="color:#000; font-family:Arial, Helvetica, sans-serif; text-align:left; padding:25px 10px;">
<p style="color:#666;margin:0px;padding-left: 20px;">08:00</p>
</td>
<td width="10%">
<span style="width:3px; background-color:#2C3840; margin-left: 18px; margin-top: -48px;"> </span>
<p style="background-color:#EF7247;width:35px;margin:0px; height:35px; line-height: 35px;text-align: center;border:3px solid #2C3840; border-radius:50%;">P</p>
<span style="width:3px; background-color:#2C3840; margin-left: 18px; margin-top: -48px;"> </span>
</td>
<td align="center" width="60%" style="color:#000; font-family:Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; text-align:left;">
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td><img src="http://alialamshahi.com/themes/eventify/images/tri_left.png"></td>
<td><h4 style="background-color:#fff;border-radius:10px; padding:15px; color:#2C3840;margin:0px;"> Pre-Party <strong style="color:#999;">Sponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere Labs Sponsored by Sphere Labs Sponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere LabsSponsored by Sphere Labs</strong> </h4></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--time-->
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; margin-bottom:2px; font-weight:normal;">September 24</h1>
</td>
</tr>
</tbody>
</table>
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>
<tr>
<td align="center" style="color:#fff;">
<h1 style="background-color:#2C3840; padding:12px; font-family:Arial, Helvetica, sans-serif; text-transform:uppercase; font-size:22px;margin:0px; font-weight:normal;">September 25</h1>
</td>
</tr>
</tbody>
</table>

Answer 1

Set the properties to style the top and bottom borders. U can use the style below...hope it is what you want.
.className {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}

Answer 2

Does height and width not apply to span?
found this one, try to use div instead of a span, span cannot hold width and height, much better if use div, div can hold height in which you could make it occupy the whole space to make it look connected, regards