JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content">
  <div class="list_container">
    <div class="list_item">Adis Abeba</div>
    <div class="list_item">Amsterdam</div>
    <div class="list_item">Beijing</div>
    <div class="list_item">Buenos Aires</div>
    <div class="list_item">Johannesburg</div>
    <div class="list_item">Mexico City</div>
    <div class="list_item">Paris</div>
    <div class="list_item">Stockholm</div>
  </div>
</div>

CSS

.content {width: 500px; border:1px solid #111; padding: 10px;}
.list_container {overflow:hidden;}
.list_item {float:left; display: block;}