JSFiddle - React, Tailwind, and code Playground

HTML

<div>
		<ul>
			<li>
				<div></div>
				<p>mod tempor incididunts</p>
			</li>
			<li>
				<div></div>
				<p>Lorem ipsum dolor sit amet, consectetur  </p>
			</li>
			<li>
				<div></div>
				<p>Lorem ipsum dolor sit amet, </p>
			</li>
			<li>
				<div></div>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
			</li>
			<li>
				<div></div>
				<p>Lorem ipsum dolor sit amet, consectetur  </p>
			</li>
			<li>
				<div></div>
				<p>Lorem ipsum dolor sit amet, </p>
			</li>
			<li class="footerList"></li>
		</ul>

	</div>

CSS

ul {
			display: inline-table;
			width: 470px;
			overflow: hidden;
            text-align: center;
            outline: 1px solid red;
            padding: 0;
		  }
		  li {
			display: inline-block;
            min-width: 150px;
			width: 30%!important;
			list-style: none;
            vertical-align: top;
            text-align: left;
            background: #ccc;
			border:1px solid;
		  }
			li > div {
				
				height: 100px;
				background-color: #333;
			}
            
		.footerList {
            min-width: 100%!important;
            width: 100%!important;
            height: 1px!important;
            background: transparent;
            border: none;
		}