JSFiddle - React, Tailwind, and code Playground

by Kesavamoorthi Subramanian

HTML

<main>
  <div class="div1"><p>image with dinamic height</div>
  <div class="div2"><p>div with information about the page</div>
</main>

CSS

*{box-sizing:border-box}

main{
  min-height:500px;
  display:flex;
  flex-direction:column
}

.div1{
  flex:0;
  height: 100px; /*for demonstration only, leave it undeclared (auto)*/
  border:2px solid orange; 
  color:orange
}

.div2{
  flex: 1 0 auto;
  border: 2px solid lightblue;
  color:lightblue;
}