JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<div class="content">
    <div class="list_title">
            Type
    </div>
    <div class="list_item">
    <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>    
</div>
<div class="content1">
    <div class="list_tit">Somet Type</div>
    <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;
    display: flex;
    align-items: center;
}
.list_container {
    overflow:hidden;
    -webkit-column-count:3;
    -moz-column-count:3;
    -o-column-count:3;
    column-count:3;
    display:block;
}
.list_title {
    text-align:center;
    margin: 5px 10px;
    vertical-align: middle;
}   

.content1 {
    width: 500px;
    padding: 10px;
}
.list_tit {
    padding:5px 0px;
    border-bottom:1px solid #111;
    margin-bottom:10px;
}