JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display: flex; gap: 10px">

  <div class="outer">
      <div class="square">
      </div>
  </div>

  <div class="outer2">
      <div class="square">
      </div>
  </div>
</div>

CSS

.outer {
  width: 200px;
  height: 100px;
  background: gray;
  border: 1px solid black;
}

.outer2 {
  width: 100px;
  height: 200px;
  background: gray;
  border: 1px solid black;
}

.square {
  width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  background: red;
  position: relative;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}