JSFiddle - React, Tailwind, and code Playground

by beej

HTML

<a href="https://sites.google.com/a/buildium.com/specs/pages/mp04-8230_print_epay_application">The specifications</a>
<h1>CSS Option</h1>
<p>
    This is a very semantic and clean option. The whole group is in a an unordered-list (&lt;ul&gt;) and each address is a (&lt;li&gt;).
</p>
<p>
    The disadvantage is that, in order to set a margin between the items, we must also specify a fixed height for each item.
</p>
<p>
    This will also not work in IE &lt;10, so if we're using some sort of older rendering library we might run into trouble.
</p>
<ul class="list">
	<li>
		1 Main Street<br/>
		Boston, MA 02210<br/>
	</li>
	<li>
		202 Lippitt Street<br/>
		Providence, RI 02906<br/>
	</li>
	<li>
		25 Bank Street<br/>
		Harwich Port, MA 02646<br/>
	</li>
	<li>
		26 Bradley Park Drive<br/>
		Hingham, MA 02043<br/>
	</li>
	<li>
		3103 Hockley Drive<br/>
		Hingham, MA 02043<br/>
	</li>
	<li>
		465 Washington Street<br/>
		Apt 5<br/>
		Brookline, MA 02446<br/>
	</li>
	<li>
		50 Commonwealth Ave<br/>
		Boston, MA 02116<br/>
	</li>
	<li>
		99 Luftballons Dr.<br/>
		Suite 12<br/>
		Westwood, MA 02090<br/>
	</li>
</ul>

<hr>
    <h1>List > Table (via jQuery)</h1>
    
<ul class="list-template">
	<li>
		1 Main Street<br/>
		Boston, MA 02210<br/>
	</li>
	<li>
		202 Lippitt Street<br/>
		Providence, RI 02906<br/>
	</li>
	<li>
		25 Bank Street<br/>
		Harwich Port, MA 02646<br/>
	</li>
	<li>
		26 Bradley Park Drive<br/>
		Hingham, MA 02043<br/>
	</li>
	<li>
		3103 Hockley Drive<br/>
		Hingham, MA 02043<br/>
	</li>
	<li>
		465 Washington Street<br/>
		Apt 5<br/>
		Brookline, MA 02446<br/>
	</li>
	<li>
		50 Commonwealth Ave<br/>
		Boston, MA 02116<br/>
	</li>
	<li>
		99 Luftballons Dr.<br/>
		Suite 12<br/>
		Westwood, MA 02090<br/>
	</li>
</ul>

CSS

table,
ul {
    font-weight: bold;
    font-family: sans-serif;
}

td {
    padding-bottom: 1em;
    vertical-align: top;
}

table {
    width: 100%;
}

.list {
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
    column-count:2;
}

.list li {
    margin-bottom: 1em;
    height: 3.5em;
}

JavaScript

$(function () {
    var table = $('<table>'),
        tr = $('<tr>'),
        list = $('.list-template li').remove(),
        colNum = 0,
        columns = 2,
        rowNum = 0;
        numRows = Math.ceil(list.length / columns);
    
    for (rowNum = 0; rowNum < numRows; rowNum += 1) {
        var tr = $('<tr>');
        for (colNum = 0; colNum < columns; colNum += 1) {
            $('<td>').append(
                    $(list[numRows * colNum + rowNum]).html()
                ).appendTo(tr);
        }
        table.append(tr);
    }
    
    $('body').append(table);
});