JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<div class="wrapper-with-intrinsic-ratio">
  <div class="element-to-stretch">
    <div class="box">
  <div class="inner">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolore recusandae necessitatibus ducimus exercitationem quas, est harum voluptate. Expedita modi in nisi aperiam, nam reiciendis asperiores soluta illum nulla itaque perspiciatis, facere repellendus dignissimos quibusdam quaerat perferendis quo vero. Aliquid autem itaque, eveniet impedit nisi, corporis quae voluptatum consequuntur dolorem.
    </div>
  </div>
</div>
<div class="box">
  <div class="inner">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolore recusandae necessitatibus ducimus exercitationem quas, est harum voluptate. Expedita modi in nisi aperiam, nam reiciendis asperiores soluta illum nulla itaque perspiciatis, facere repellendus dignissimos quibusdam quaerat perferendis quo vero. Aliquid autem itaque, eveniet impedit nisi, corporis quae voluptatum consequuntur dolorem.
    </div>
  </div>
</div>
<div class="box">
  <div class="inner">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, dolore recusandae necessitatibus ducimus exercitationem quas, est harum voluptate. Expedita modi in nisi aperiam, nam reiciendis asperiores soluta illum nulla itaque perspiciatis, facere repellendus dignissimos quibusdam quaerat perferendis quo vero. Aliquid autem itaque, eveniet impedit nisi, corporis quae voluptatum consequuntur dolorem.
    </div>
  </div>
</div>
<div class="box">
  <div class="inner">
    <div class="content">
    </div>
  </div>
</div>
<div class="box">
  <div class="inner">
    <div class="content">
     <form>
    <input type="text" size="40">
    <input type="submit" value="Отправить">    
    </form>
    </div>
  </div>
</div>
<div class="box">
  <div class="inner">
    <div class="content">
         ЭтоОченьДлинноеСлово
    </div>
 ...

CSS

.wrapper-with-intrinsic-ratio {
  margin: auto;
	position: relative;
	padding-bottom: 98%;
  padding-left: 98%;
	height: 0;
  width: 0;
}
.element-to-stretch {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #ebf;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: space-around;
  justify-content: space-around;
}
.box {
  flex-basis: calc(100% / 4 - 8px);
  box-sizing: border-box;
  padding: 10px;
  margin: 4px;
  background: #fee;
}
.inner {
  position: relative;
  height: 0;
  padding-top: 100%;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: #fff;
}