JSFiddle - React, Tailwind, and code Playground

by jdv590

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <title>My Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
     
    </head>
    
    <body>
        <div style="display: block;">
            
            <span class="right">China</span>
            <span class="right">220 V</span>
            <span class="right">50 HZ</span>
            <span class="right">USA</span>
            <span class="left">Where</span>
            <span class="left">Voltage</span>
            <span class="left">Frequency</span>
            <span class="left">Plug Type</span>
        </div>
    </body>

</html>

CSS

.left {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }
            .right {
                /* Behave  like a "row" */
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 50%;
            }
            span {
                display:block;
            }