JSFiddle - React, Tailwind, and code Playground

by Kolichikov

HTML

<div class="container">
  <div class="title">
    <p >rowsd a really long piece of text that doesn't fit into our container at all</p>
  </div>
  <div>
    <p>row2</p>
  </div>
  <div>
    <p>row3asdf asdf qwe rqsdf qwe fasdc qwe fasdf qwef asdf as</p>
  </div>
  <div>
    <p>row4 asdf asdf asdf asdf asdfasdfa sdf asdf asdf aswqerq werq wer qwer </p>
  </div>
</div>

<hr>

<div class="container">
  <div class="title">
    <p>row1 a really long piece of text that is so long that even the developer didn't anticipate it and like it's so big</p>
  </div>
  <div>
    <p>row2 is also pretty long so what happens</p>
  </div>
  <div></div>
  <div>
    <p>row4</p>
  </div>
</div>

<hr>

<div class="container">
  <div class="title">
    <p>row1 a really long piece of text that doesn't fit into our container at all</p>
  </div>
  <div></div>
  <div>
    <p>row3</p>
  </div>
  <div></div>
</div>

CSS

p {
  margin: 0;
  padding: 1%;
  max-height: 100%;
  overflow: hidden;
/*   -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box; */
}

.title {
  flex-grow: 1;
}

.container {
  display: flex;
  border: 1px solid red;
  flex-direction: column;
  height: 150px;
  width: 80px;
}

.container>* {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  border: 1px solid;
  min-height:20px;
  max-height:25%;
}

.container> :empty {
  flex-basis: 0px;
  border: 0;
  min-height:0px;
}

.container:has(> :empty)>* {
  flex-basis: auto;
  max-height:unset;
}