JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="specs">
        <li>
            <div class="trigger">› City (2)</div>
            <div class="cityByLocation">
                <ul>
                    <li class="cityInfo">
                        <div class="cityName" style="float: left;">
                            › New York
                        </div>
                        <div class="cityDistance" style="float: left;">
                            430 miles
                        </div>
                        <div class="btn-take"></div>
                    </li>
                    <li class="cityInfo">
                        <div class="cityName" style="float: left;">
                            › Chicago
                        </div>
                        <div class="cityDistance" style="float: left;">
                            430 miles
                        </div>
                        <div class="btn-take"></div>
                    </li>
                </ul>
            </div>
        </li>
<ul>

CSS

.cityByLocation {
    background-color: #ccccff;   
    overflow: hidden;
}

.cityName{
    float: left;
    width: 45%;
}


.cityDistance {
    float: left;
    width: 20%;
}

.specs {

    padding: 0;
}

.specs li {
    padding: 0;
    padding-top: 10px;

    list-style: none;
}

.specs ul {
    list-style: none;
    padding: 0;
}