JSFiddle - React, Tailwind, and code Playground

by matmuchrapna

HTML

<div class="column">
        <h4>Header</h4>
        <ul>
            <li>number one</li>
            <li>number two</li>
            <li>number three</li>
        </ul>
    </div>
    <div class="column">
        <h4>Header 2</h4>
        <ul>
            <li>number four</li>
            <li>number five</li>
            <li>number six</li>
        </ul>
    </div>

CSS

.column {
        width: 100%;
        margin-top: 5px;
        }
    .column ul {
        list-style: decimal;
        padding-left: 20px;       
        }
    
    @media only screen and (min-width: 500px) {
        .column {
            width: 50%;
            float: left;
            }
    
    }