JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <table border="1">
            <tr>
                <td>
                    Eevee
                </td>
                <td>
                    Normal Type
                </td>
            </tr>
            <tr>
                <td>
                    <ul class="node">
                        <li class="nodev">.</li>
                        <li class="nodeh nodev">.</li>
                    </ul>
                    Jolteon
                </td>
                <td>
                    Electric Type
                </td>
            </tr>
            <tr>
                <td>
                    <ul class="node">
                        <li class="nodev">.</li>
                        <li class="nodeh">.</li>
                    </ul>
                    Foobareon
                </td>
                <td>
                    Data Type
                </td>
            </tr>
        </table>
    </body>
</html>

CSS

ul.node li , ul.noden li{
	display:block;
	list-style:none;
	width:7px;
	height:50%;
	margin-right:2px;
	margin-left:7px;
}
ul.node {
	float:left;
	height:100%;
	margin-top:-1px;
}
ul.noden {
	float:left;
	padding-top:33px;
	margin-top:-1px;
	border-left:1px black solid;
	width:7px;
	margin-left:7px;
}

/* nodev = node with vertical border */
.nodev {
	border-left: 1px black solid;
}
/* nodev = node with horizontal border*/
.nodeh {
	border-top: 1px black solid;
}