JSFiddle - React, Tailwind, and code Playground

by megaadriano

HTML

<div class="content">
    <header>
        <span class="title">Title</span>
        <span class="title">Avail</span>
        <span class="title">List</span>
    </header>
    <main>
       <section id="item-1">
            <span class="title">Item 1</span>
            <span class="title"></span>
            <span class="title">
                <span>One</span>
                <span>Two</span>
                <span>Three</span>
                <span>Four</span>
            </span>
       </section> 
       <section id="item-2">
            <span class="title">Item 2</span>
            <span class="title">Yes</span>
            <span class="title">
                <span>Two</span>
                <span>Three</span>
            </span>
       </section> 
       <section id="item-3">
            <span class="title">Item 3</span>
            <span class="title"></span>
            <span class="title">
            </span>
       </section>         
    </main>
</div>

CSS

div.content {
        display: table;
        width: 100%;
        border: 1px solid black;
    }
    
    div.content header, div.content main section {
        display: table-row;

    }
    
    span.title {
        display: table-cell;
        width: 33%;
        border: 0.05px solid black;
    }
    main { display: table-row-group }