JSFiddle - React, Tailwind, and code Playground

by Raver0124

HTML

<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>

CSS

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