JSFiddle - React, Tailwind, and code Playground

by Hastig Z

HTML

<div id="footer">
  <div class="arrange"><p>1</p></div>
  <div class="arrange"><p>2</p></div>
  <div class="arrange"><p></p></div>
  <div class="arrange"><p>4</p></div>
</div>

CSS

* {
  box-sizing: border-box; /* percentage calculations wont include border width and padding, but margin still messes with it, see calc below */
}
body {
    width: 100vw; 
}
#footer {
    width: 100%;
    height: 400px;
 padding: 40px 5px; /* i added this top padding based on your wanting children to be 80% of parents height. 40 top, 40 bottom */
    background-color: red;
    opacity: 0.5;
    text-align: center;
    line-height: 12px;
    overflow: hidden;
font-size: 0; /* eliminate ghost spaceing after inline blocks */
}

.arrange {
    display: inline-block;
width: calc(25% - 10px); /* width% - margin */
height: 100%; /* 100% of parent minus padding of parent */
margin: 0px 5px; /* spacing, margin accounted for in calc of width, 5left + 5right = 10 */
font-size: 20px; /* reset font size */
    border: solid 1px black;
    background-color: white;
    vertical-align: top;
}