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;
    -webkit-column-count:3;
    -moz-column-count:3;
    -o-column-count:3;
    column-count:3;
}