JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div>
    Hello World
  </div>
  <div>
    <div class="square"><div>
      <div>Meow meow</div>
    </div></div>
  </div>
  <div>
    The quick brown fox<br/>
    Jumps over the lazy dog.
  </div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

div {
  /* This is just so we se where the divs are. */
  outline: 1px solid #000;
}

.main {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}

/* Uncomment the following if the ones on the side should never shrink. */
/* .main > div { flex-shrink: 0; } */

.main > div:nth-child(2) {
  flex: 1;
  contain: layout size style; /* This prevents the content form affecting the size of the container. */
  /* The following is for the container query */
}

.square {
  container-type: size;
  container-name: square;
  height: 100%;
  width: 100%;
}

.square > div {
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.square > div > div {
  display: block;
  margin: 0 auto;
  aspect-ratio: 1;
  flex: 1;
}

@container square (aspect-ratio < 1) {
  .square > div {
    flex-direction: row;
  }
}