JSFiddle - React, Tailwind, and code Playground

by Grzegorz Rozdzialik

HTML

<h2>Table example - recommended one</h2>
<table class="full-width">
    <thead>
        <tr>
            <th>Item name</th>
            <th>Price</th>
            <th>Available</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Karambit whatever</td>
            <td>$50</td>
            <td>In store</td>
        </tr>
        <tr>
            <td>Karambit 2</td>
            <td>$50</td>
            <td>In store</td>
        </tr>
        <tr>
            <td>Karambit 3 with more length</td>
            <td>$100</td>
            <td>In store</td>
        </tr>
    </tbody>
</table>

<h2>Div's example</h2>

<div class="full-width">
    <div class="item">
        <div class="item-name">Karambit whatever</div>
        <div class="item-price">$50</div>
        <div class="item-available">In store</div>
    </div>
    <div class="item">
        <div class="item-name">Karambit 2</div>
        <div class="item-price">$50</div>
        <div class="item-available">In store</div>
    </div>
    <div class="item">
        <div class="item-name">Karambit 3 with more length</div>
        <div class="item-price">$50</div>
        <div class="item-available">In store</div>
    </div>
</div>

CSS

/* Universal */
.full-width {
    width: 100%;
}

/* 
For the table you don't need to set any widths in CSS, as it will adjust automatically
*/


/* Div's example */
.item {
    margin-bottom: 5px;
}

/* A clearfix so that margins work */
.item:after {
    content: '';
    clear: both;
    display: table;
}

.item-name, .item-price, .item-available {
    float: left;
}

.item-name {
    width: 50%;
}

.item-price {
    width: 25%;
}

.item-available {
    width: 25%;
}