JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='parent'>
  <div class='child'>
    <header>head</header>
    <div class='body'>
      Lorem ipsum dolor sit amet, consectetur 
      adipiscing elit, sed do eiusmod tempor 
      incididunt ut labore et dolore magna aliqua.
    </div>
    <footer>
      foot
    </footer>
  </div>
  
  <div class='child'>
    <header>head</header>
    <div class='body'>
      body
    </div>
    <footer>
      foot
    </footer>
  </div>
</div>

SCSS

body {
  margin: 0;
}

.parent {
  display: flex;
  flex-direction: 'row';
  margin: 10px;
}

.child {
  font-family: arial;
  width: 50%;
  border: 1px dashed #eee;
  padding: 40px;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  
  header, footer {
    flex-grow: 0;
    flex-shrink: 1;
  }
  
  .body {
    flex-grow: 1;
    flex-shrink: 1;
    margin-top: 10px;
  }
  
  footer {
    margin-top: 10px;
  }
}