JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="listbutcity">
    <li data-name="ufa">Уфа</li>
    <li data-name="Moskov">Москва</li>
    <li data-name="bratsk">Братск</li>
</ul>

<ul id="listcity">
    <li class="Moskov">Moskov</li>
    <li class="ufa">ufa</li>
    <li class="bratsk">bratsk</li>
    <li class="Moskov">Moskov</li>
    <li class="bratsk">bratsk</li>
    <li class="ufa">ufa</li>
    <li class="Moskov">Moskov</li>
</ul>

CSS

ul{list-style:none;margin:0;padding:0;}
ul li{text-align:center;}
ul:nth-child(1){width:100%;max-width:102px;float:left;}
ul:nth-child(2){display:table-cell;padding:0 5px;width:316px;}
ul:nth-child(1) li{border:1px solid #ddd;width:80px;padding:5px 10px;background-color:#CC9B00;border-radius:4px;margin:5px 0;cursor:pointer;font:.9em/normal sans-serif;}
ul:nth-child(2) li{height:70px;width:70px;border:1px solid #ddd;display:inline-block;background-color:#9CB7F1;line-height:70px;margin: 4px 2px;}