JSFiddle - React, Tailwind, and code Playground

HTML

<div>
                            <table width="50%" style="float:left" class="tdDotted">
                                <tr>
                                    <td ><p class=" entityHeader">Study Title</p></td>
                                    <td><p >row 1, cell 2</p></td>
                                </tr>
                                <tr>
                                    <td><p class=" entityHeader">Start Date</p></td>
                                    <td><p >row 2, cell 2</p></td>
                                </tr>
                            </table>
                            <!---Want a vertical line here--->
                            <table width="50%" style="float:left" class="tdDotted">
                                <tr>
                                    <td ><p class=" entityHeader">Project Type</p></td>
                                    <td><p >row 1, cell 2</p></td>
                                </tr>
                                <tr>
                                    <td><p class=" entityHeader">Project Subtype</p></td>
                                    <td><p >row 2, cell 2</p></td>
                                </tr>
                            </table>
                        </div>

CSS

.tdDotted td{ //border-color: #FFBD32; 
                 border-style: none none dotted none;
                 border-width:1px; }
                 
            .verticalLine {
                    border-left:thick solid #ff0000;
                }
            .entityHeader{
                font-weight:bold;
            }