JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <div class="foo">
            <h1>list item 1</h1>
        </div>
    </li>
    <li>
        <div class="foo">
            <p>list item 2</p>
        </div>
    </li>
    
     <li>
        <div class="foo">
            <p>list item 3</p>
            <p>a paragraph</p>
        </div>
    </li>
</ul>

CSS

div.foo
{
    width:100px;
    height:100px;
    background:cyan;
}

ul
{
    text-align:justify;
}

li
{
    display: inline-block;
	position: relative;
	margin: 0;
	padding:0;
	border-width: 0;
}

ul:before
{
    content:'';
    display:block;
}
ul:after
{
    content:'';
    display:inline-block;
    width:100%;
}