JSFiddle - React, Tailwind, and code Playground

by cs3vigny

HTML

</div class="coreAirports">
<ul class="coreAirports">	
	<li><span class="coreAirportAbbr">CAE</span> <span class="coreAirportName">Columbia Metropolitan</span></li>
	<li><span class="coreAirportAbbr">CLT</span> <span class="coreAirportName"><a class="airportLink" href="../../airport/?locationId=24" title="Charlotte-Douglas International Airport">Charlotte-Douglas International</a></span></li>
	<li><span class="coreAirportAbbr">GSO</span> <span class="coreAirportName">Piedmont Triad International</span></li>
	<li><span class="coreAirportAbbr">GSP</span> <span class="coreAirportName">Greenville Spartanburg International</span></li>
	<li><span class="coreAirportAbbr">JQF</span> <span class="coreAirportName">Concord Regional</span></li>
	<li><span class="coreAirportAbbr">RDU</span> <span class="coreAirportName">Raleigh-Durham International</span></li>
    <li><span class="coreAirportAbbr">BWI</span> <span class="coreAirportName"><a class="airportLink" href="../../airport/?locationId=23" title="Baltimore/Washington International Thurgood Marshall Airport">Baltimore/Washington International Thurgood Marshall</a></span></li>
</ul>
</div>

CSS

.coreAirports {
    width: 220px; /* This is only here to simulate the FAA.gov right side bar */
    list-style-type: none; 
    padding-left: 0px;
	border-top: 1px solid #e7e7e7;
}

.coreAirports li {    
	border-bottom: 1px solid #e7e7e7;
    padding-top: 2px;
    padding-bottom: 2px;
}

.coreAirportAbbr {
	display: inline-block;
	width: 50px;
	background: #ebebeb;

    text-align: center;
}
.coreAirportName {
	display: inline-block;
    vertical-align: middle;
    width: 160px;
    padding: 6px 0px;
}

JavaScript

$(function () {
    $("li").each(function () {
        //alert($(this).height());
        $(this).find("span:first").css("line-height", ($(this).height() + 12) + "px");
    });
});