JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="wrapper">
        <div id="d1">lorem ipsum</div>
    </div>
    <!-- #wrapper -->
    <div id="d2">This should appear .25rem's under #d1 container</div>
</body>

CSS

html, body { height: 100%; }

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: steelblue;
}

#wrapper {
    display: flex;
}

#d2 {
    margin-top: 0.25rem;
    text-align: center;
    background-color:#336712;
}