Intersecting horizontal and vertical lines in HTML and CSS - html

Question

I have begun creating an OrgChart using HTML and CSS. One issue I have run into is creating an intersecting chart flow-line between <tr> and <td> elements.
I created container, vertical-line and horizontal-line definitions that I wrapped into <td> andtags. The vertical-line works correctly by cantering the line in the. I created a second` for the horizontal-line to intersect in the middle with the vertical-line. However, the line remains at the bottom.
I have added the CSS and HTML to my post and hope that one of you can help me on what I am doing wrong.
table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
width: auto;
}
tr {
border: none;
}
th,
td {
border-collapse: collapse;
border: 1px solid black;
padding-top: 0;
padding-bottom: 0;
text-align: center;
width: 100;
}
div.container {
width: 40px;
}
div.vertical-line {
border-left: 1px solid red;
height: 55px;
margin-left: auto;
margin-right: auto;
width: 1px;
}
div.horizontal-line {
border-bottom: 1px solid red;
height: 1px;
margin-top: auto;
margin-bottom: auto;
width: 40px;
}
<table>
<tr>
<td style="background-color: goldenrod" colspan="3">
<div>Dept
</br>
<b>EmpName</b>
</div>
</td>
</tr>
<tr>
<td style="width: 42.5%; background-color: wheat">
<div>Dept
</br>
<b>EmpName</b>
</div>
</td>
<td style="width: 15%">
<div class="container">
<div class="vertical-line"> </div>
<div class="horizontal-line"> </div>
</div>
</td>
<td style="width: 42.5%">
<div style="background-color:#CCFFCC">Dept
</br>
<b>EmpName</b>
<div style="border-bottom: 1px solid">
</div>
<div style="background-color:#CCFFFF">Dept
</br>
<b>EmpName</b>
</div>
</td>
</tr>
</table>

Answer 1

Here's a workaround:
add another horizontal line before the vertical line:
<td style="width: 15%">
<div class="container">
<div class="horizontal-line"> </div>
<div class="vertical-line"> </div>
<div class="horizontal-line"> </div>
</div>
</td>
Then change the display of it's container to flex:
div.container {
display: flex;
width: 40px;
}