JSFiddle - React, Tailwind, and code Playground

by Arjan Einbu

HTML

<div class="table">
    <div class="row">
        <div class="cell1">
            <div class="inner">
                <h2>Cell 1</h2>
                <p>Regardless of content, can I make Cell 1 and Cell 2 the same height so the borders are level?</p>            
            </div>
        </div>
        <div class="cell2">
            <div class="inner">
                <h2>Cell 2</h2>
		    </div>
	    </div>
    </div>
</div>

CSS

.table{
    display: table;
    border-spacing: 12px;
}

.row {
    display: table-row;
    margin-bottom: 0;
    margin-top: 12px;
    width: 100%;
}
.cell1 {
    display: table-cell;
    width: 49%;
    margin-right: 1%;
    border: 1px solid #CCC;
    margin: 12px;
}
.cell2 {
    display: table-cell;
    width: 49%;
    margin-left: 1%;
    border: 1px solid #CCC;
    margin 12px;
}
.inner {
    padding-left: 12px;
    padding-right: 12px;
}