JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
			<div class="logo"></div>
			<div class="square" id="lilac"></div>
			<div class="square" id="blue"></div>
			<div class="square" id="green"></div>
			<div class="square" id="orange"></div>
			<div class="square" id="red"></div>
			<div class="square" id="brown"></div>
		</div>

CSS

.header {
    min-width: 500px;
    max-width: 700px
}

.logo {
    width: 35%;
    background: #000;
    /*display: inline-block;*/
    float: left;
}

.square {
    width: 16%;
    margin-left: 10px;
    /*display: inline-block;*/
    float: left;
}

#orange, #red, #brown {
	margin-top: 20px;
}

#lilac {
	background: #990099;
}

#blue {
	background: #6699FF;
}

#green {
	background: #339966;
}

#orange {
	background: #CC3300;
}

#red {
	background: #990000;
}

#brown {
	background: #663300;

JavaScript

$(document).ready(function(){
	$('.square').height($('.square').width()/1);

	$(window).resize(function(){
		$('.square').height($('.square').width()/1);
	});
    $('.logo').height($('.logo').width()/1);

	$(window).resize(function(){
		$('.logo').height($('.logo').width()/1);
	});
});