JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="head">some head</div>
    <div class="body">foobar</<div>
</div>

CSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body{
    margin: 0;
}

.container{
    display:table;
    width: 100%;
    height: 500px;
    background-color: red;
    padding: 0 10px;
}

.head, .body{
    display: table-row;
}

.head{
    background-color: blue;
}

.body{
    background-color: yellow;
    height: 100%;
}