JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<footer>
		<div id="colophon">
			<h1>
				Mission Statement
			</h1>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</p>
		</div>
		<nav id="internal">
			<h1>
				More stuff on this website
			</h1>
			<ul>
				<li>Link 1</li>
				<li>Link 2</li>
				<li>Link 3</li>
				<li>Link 4</li>
				<li>Link 5</li>
				<li>Link 6</li>
				<li>Link 7</li>
			</ul>
		</nav>
		<nav id="external">
			<h1>
				Group
			</h1>
			<ul>
				<li>Parent Company</li>
				<li>Sister Company</li>
				<li>Sister Company with a Long Name</li>
			</ul>
		</nav>
	</footer>
</body>

CSS

html, body {
    font-family: sans-serif;
    font-size: 12px;
}
h1, p, li {
    font-size: 1rem;
    line-height: 1.4;
}
h1 {
    margin: 0 0 1.4rem 0;
    font-weight: bold;
    text-transform: uppercase;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
li {
    text-transform: uppercase;
}
footer {
    margin: 2em;
    padding: 1em;
    border: 1px dotted grey;
    background-color: rgba(0, 0, 0, 0.1);
}
#colophon {
    border: 1px dotted red;
    background-color: rgba(255, 0, 0, 0.1);
}
#internal {
    border: 1px dotted green;
    background-color: rgba(0, 255, 0, 0.1);
}
#external {
    border: 1px dotted blue;
    background-color: rgba(0, 0, 255, 0.1);
}
/* flex box layout here */
footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#colophon {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 30%;
    -ms-flex: 1 1 30%;
    flex: 1 1 30%;
}
#internal {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 40%;
    -ms-flex: 1 1 40%;
    flex: 1 1 40%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#internal > * {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
}
#external {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 30%;
    -ms-flex: 1 1 30%;
    flex: 1 1 30%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}
#external > * {
    -webkit-box-flex: 0;
    -webkit-flex: initial;
    -ms-flex: initial;
    flex: initial;
}
#external h1 {
    margin-left:...