JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
    	<li>1</li>
        <li>2</li>
        <li>3</li>
	    <li>4</li>
    </ul>
</div>

CSS

html, body {margin: 0; height: 100%}

div {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: auto;
}

ul {
	padding: 0;
	margin: auto;
	width: 70%;
	
	display: inline-flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-items: center;
	align-content: center;
}

li {
	list-style-type: none;
	border: 1px solid tomato;
	box-sizing: border-box;
	flex-basis: calc(100%/3);
}

JavaScript

$(document).ready(function () {
	"use strict";
	
	var width = $('li').width();
	
	$('li').css({
		'height': width + 'px',
        'background-color': 'green',
	});
    
    $(window).resize(function(){
   		$('li').height(width);
	});
});