JSFiddle - React, Tailwind, and code Playground

by Patrick Kershner

HTML

<div class="container">
    <fieldset>
        <legend>Module 1</legend>
        <section class="threewide">
            <fieldset>
                <legend>THIS IS COLUMN 1 LEFT</legend>
                <div>This is content</div>
            </fieldset>
        </section>
        <section class="threewide">
            <fieldset>
                <legend>THIS IS COLUMN 3 RIGHT</legend>
                <div>This is content</div>
            </fieldset>
        </section>
        <section class="threewide">
            <fieldset>
                <legend>THIS IS COLUMN 2 CENTER</legend>
                <div>This is content</div>
            </fieldset>
        </section>
    </fieldset>
</div>
<div class="container">
    <fieldset>
        <legend>Module 2</legend>
        <section class="threewide">
            <fieldset>
                <legend>THIS IS COLUMN 1 LEFT</legend>
                <div>This is content</div>
            </fieldset>
        </section>
        <section class="threewide">
            <fieldset>
                <legend>THIS IS COLUMN 3 RIGHT</legend>
                <div>This is content</div>
            </fieldset>
        </section>
        <section class="threewide">
            <fieldset>
                <legend>THIS IS COLUMN 2 CENTER</legend>
                <div>This is content</div>
            </fieldset>
        </section>
    </fieldset>
</div>

CSS

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
}
body {
    font-family:Verdana, Geneva, sans-serif;
}
.threewide {
    float: left;
    display: inline-block;
    width: 33%;
    box-sizing: border-box;
    height: 200px;
    border:1px solid #d3d3d3;
}
.container {
    padding:5px;
}
fieldset {
    border:1px solid #d3d3d3;
}