JSFiddle - React, Tailwind, and code Playground

by anoopsuda

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.min.js"></script>
<div class="  fill-height-or-more ">
<div>
SAMPLE TEXT
</div>
<div>
SAMPLE TEXT 2
</div>
</div>

CSS

body {margin:0;}


.fill-height-or-more  {
  border:solid 1px red;
  min-height:100vh;
   
   
    display: flex;
  flex-direction: column;
}
div {
  background:#ddd;
  margin:0;
   
}
div {
   background:#ccc;
    margin:0;
    
}

.fill-height-or-more > div {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  border:solid 1px black;
}