JSFiddle - React, Tailwind, and code Playground

HTML

<!-- FIRST COLUMN -->
<div class="pageColumnOneThird">
    <div class="itemWrap">Element 1</div>
    <div class="itemWrap">Element 4</div>
    <div class="itemWrap">Element 7</div>
</div>
<!-- SECOND COLUMN -->
<div class="pageColumnOneThird">
    <div class="itemWrap">Element 2</div>
    <div class="itemWrap">Element 5</div>
    <div class="itemWrap">Element 8</div>
</div>
<!-- THIRD COLUMN -->
<div class="pageColumnOneThird">
    <div class="itemWrap">Element 3</div>
    <div class="itemWrap">Element 6</div>
    <div class="itemWrap">Element 9</div>
</div>

CSS

.pageColumnOneThird{
    width: 300px;
    padding: 0 1px;
    height: auto;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    float: left;
}
.itemWrap{
    background-color: #AEAEAE;
    margin: 2px 0;
    width: 100%;
}