JSFiddle - React, Tailwind, and code Playground

by M. B. Parvez Rony

HTML

<table>
    <tr>
        <td><i class="line"></i><p>This Is demo Text</p></td>
    </tr>
</table>

CSS

table{
    float:left;
    width:200px;
    height:100px;
}
tr,td{
    height:100%;
    width:100%;
}
td{
    position:relative;
    background-color:#AAA;
    overflow:hidden;
}

/*Centering*/

.line{
    width:100%;
    height:0;
    border-bottom:1px solid #111;
    float:left;
    margin:0;
    position:absolute;
    z-index:1;
    top:50%;
    left:0
}


td p{
    z-index:100;
    font-size:20px;
    font-family:Arial;
}