This is my current design.
https://i.sstatic.net/VOexn.png
This is the layout I aim to achieve:
https://i.sstatic.net/hMy7C.png
1. The width and height of the outer container should maintain the specified aspect ratio.
2. The content area should also adhere to the same aspect ratio.
App.js (Bootstrap is being utilized, hence no separate CSS file at the moment)
<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>
CodeSandbox link:
https://codesandbox.io/s/condescending-monad-50lwd?file=/src/App.js