Este es mi diseño actual.

Esto es lo que quiero hacer:

1. El ancho y la altura del contenedor exterior deben tener una relación de aspecto superior
2.el área de contenido debe tener la misma relación de aspecto

App.js (estoy usando Bootstrap, por lo que no hay ningún archivo css involucrado por ahora)

 <div class="border p-3 m-2 bg-info" style={{ width: "400px" }}> <div class="p-2 bg-light"> <div class="border p-1 border-warning" style={{ height: "100%" }}> <div class="card text-center d-flex flex-column justify-content-between bg-light border border-warning" style={{ height: "100%" }} > <div class="card-body" style={{ flexGrow: 2 }}></div> <div class="card-footer text-white p-4 border-top border-warning"> <span class="bg-danger fs-3">123</span> </div> </div> </div> </div> </div>

Caja de arena de código:
https://codesandbox.io/s/condescending-monad-50lwd?file=/src/App.js