JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "container">
    <div class = "fluid">Glee is very very awesome! I have margins, too!</div>
    <div class = "fixed">Glee is awesome!</div>
</div>

CSS

body {
    color: white;
    font-family: 'Arial', 'Helvetica', Sans-Serif;
}
.container {
    height: 300px;
    position: relative;
}
.fluid {
    background: orange;
    margin: 10px;
    position: absolute;
    top: 0;
    bottom: 75px;
    right: 0;
    left: 0;
}
.fixed {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75px;
    background: rgb(0, 162, 232);
}