JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
	<div class="header">header</div>
	<div class="content">
		<div id="aspectRatio">content</div>
	</div>
</div>

CSS

body, html{
    margin:0;padding:0;
    width:100%;height:100%;
    background-color:#000;
}
.table{
    min-height:100%; height:auto; height:100%;
    display:table;
    width:100%;
}
.header {
    display:table-row;
    height:13%;
    background-color:#ccc;
}
.content {
    display:table-row;
    height:87%;
}
#aspectRatio {
    background: #ff6a00;
    width:70%;
    margin:0 auto;
}

JavaScript

$(document).ready(function() {

     var parWidth  = $('.table').width();
     var parHeight = $('.table').height();
    
    parHeight = parHeight * 0.7;
    
    $('#aspectRatio').width(parWidth);
    $('#aspectRatio').height(parHeight);
    
});