JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" class="visible-square">
  <div id="square" class="square">
    <div class="content">
    </div>
  </div>
</div>

CSS

.visible-square{
  border: 1px solid #000;
  width: 300px;
  height: 200px;
}

.square {
  position: relative;
  width: 100%;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.content {
  position: absolute;
  width: 100%;
  height: 100%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
  background: red;
}

JavaScript

$(document).ready(function(){
	var width = $("#wrapper").width();
  var height = $("#wrapper").height();
  if(width > height){
  	$("#square").width(height);
  }
});