JSFiddle - React, Tailwind, and code Playground

by Ben Jones

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<div id="container">
  <div id="output2"></div>
  <div>top content</div>
  <div>top content</div>
  <div>top content</div>
  <div>top content</div>
  <div>top content</div>
  <div id="topPadding">top content</div>
  

  <div id="inner">    
    <div>
      <h1>Top Bar</h1>
      Always visible
    </div>
    <div>
      <h2>Content 1</h2>
    </div>
    <div>
    <h2>Content 2</h2>
    </div>
      <div>
      Center content shrinks
    </div>
    <div>
      end center content
    </div>  
    <div id="footer">
      <div>
        Footer is always be visible
      </div>
      <input type="button" value="Save" />
      <input type="button" value="Cancel" />      
    </div>
  </div>
</div>



<div id="bottomPadding">
<div>bottom content</div>
<div>bottom content</div>
<div>bottom content</div>
<div>bottom content</div>
</div>

CSS

#container {margin: 0 auto;}

#inner {
  position: absolute;
  border: solid red;
   min-width: 123px;
   min-height: 50px;
   max-width: 800px;
   width: 40%;
   display: block;
   z-index: 10003;
   opacity: 1;
   transform: scale(1);
   left: 50%;
   margin-left: -23.5%;
   height: auto;
   top: 15%;
}

#topPadding{
   padding-bottom: 40px; 
 }
 

#bottomPadding{
  position:absolute;
  diplay: inline-block;
  padding-top: 20px; 
  bottom:0;
}

#footer {
  display: "absolute"
}