JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<ul class="newslist">    <li><a href="#"><img src="http://placehold.it/30x50"/></a></li> </ul>

CSS

ul.newslist {
    width:98%;
    background-color: #ccc;
    padding: 16px 1% 0;
    list-style: none;
    text-align:justify;
}
ul.newslist:after {/* to justify last line too, add a virtual-one */
    content:'';
    display:inline-block;
    width:100%;
    
}
ul.newslist > li {
    border-top: 1px solid #000;
    display:inline-block;
    vertical-align:top;
    width:21%;
}
ul.newslist > li > a {
    display: block;
    padding: 4px;
    background-color: #f6b;
    text-decoration: none;
    color: inherit;
}

JavaScript

$(document).ready(function () {
    for (var i = 0; i < 24; i++) {
        $("ul.newslist").append("<li><a href='#'>Item " + i + "</a></li> ");
    }
    $("ul.newslist > li").click(function () {
        $(this).remove();
    })
});