JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wptheme-quickLinksShelf" class="wptheme-quickLinksShelf">
<div id="wptheme-expandedQuickLinksShelf">
<div class="wptheme-expandedQuickLinksShelfColumnContainer">
<ul class="wptheme-expandedQuickLinksShelfColumn">
<li class="wptheme-expandedQuickLinksShelfColumnHeading">Administration</li>
<li><a href="#">Web Modules</a></li>
</ul></div>
<div class="wptheme-expandedQuickLinksShelfColumnContainer">
<ul class="wptheme-expandedQuickLinksShelfColumn">
<li class="wptheme-expandedQuickLinksShelfColumnHeading">Administration</li>
<li><a href="#">Web Modules</a></li>
<li><a href="#">Web Modules</a></li>
<li><a href="#">Web Modules</a></li>
<li><a href="#">Web Modules</a></li>
</ul></div>
<div class="wptheme-expandedQuickLinksShelfColumnContainer">
<ul class="wptheme-expandedQuickLinksShelfColumn">
<li class="wptheme-expandedQuickLinksShelfColumnHeading">Administration</li>
<li><a href="#">Web Modules</a></li>
<li><a href="#">Web Modules</a></li>
<li><a href="#">Web Modules</a></li>
<li><a href="#">Web Modules</a></li>
</ul></div>
<div class="wptheme-expandedQuickLinksShelfColumnContainer">
<ul class="wptheme-expandedQuickLinksShelfColumn">
<li class="wptheme-expandedQuickLinksShelfColumnHeading">Administration</li>
<li><a href="#">Web Modules</a></li>
<li><a href="#">Web Modules</a></li>
<li><a href="#">Web Modules</a></li>
<li><a href="#">Web Modules</a></li>
</ul></div>
</div>
<div style="clear: both;"><!-- iefix --></div>
</div>
CSS
.wptheme-quickLinksShelf {
padding: 10px;
-moz-border-radius: 4px;
color:${colors.tc_qls_text_color};
background-color: ${colors.tc_qls_background_color};
background-image: url('bottom-circles.gif');
background-position: ${colors.tc_qls_background_position};
background-repeat: no-repeat;
margin-bottom: 10px;
max-width:1280px;
min-width:1024px;
margin: 0 auto;
}
/* start no tables */
.wptheme-quickLinksShelf {
padding: 10px;
color:${colors.tc_qls_text_color};
background-color: ${colors.tc_qls_background_color};
background-image: url('bottom-circles.gif');
background-position: ${colors.tc_qls_background_position};
background-repeat: no-repeat;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px;
margin-bottom: 10px;
max-width:1280px;
min-width:1024px;
margin: 0 auto;
text-align:center;
}
#wptheme-expandedQuickLinksShelf {
border-right: 2px solid #f16202;
border-left: 2px solid #f16202;
margin:auto;
display:inline-block;
padding: 0 0px 0 0px;
}
.wptheme-expandedQuickLinksShelfColumnContainer {
margin: 0 auto;
display:inline-block;
vertical-align:top;
text-align:left;
border-left:2px solid black;
height: 100%;
}
.wptheme-expandedQuickLinksShelfColumnContainer:first-child {
border-left:none;
}
.wptheme-expandedQuickLinksShelfColumn {
list-style-type:none;
padding: 0px 42px 0px 25px;
margin-top: 5px;
display:inline-block;
}
.wptheme-expandedQuickLinksShelfColumnHeading {
font-weight: bold;
}
.wptheme-expandedQuickLinksShelfColumn li {
line-height:2em;
}
JavaScript
$(function(){
tallest = null;
$('.wptheme-expandedQuickLinksShelfColumnContainer')
.each(function(){
if (tallest == null || $(this).height() > tallest.height()) {
tallest = $(this);
}
})
.height(tallest.height());
;
});