JSFiddle - React, Tailwind, and code Playground

HTML

<html>
        <body>
            <div id="stretched">
                I span from the left viewport to the right viewport.
            </div>
            <div id="main" class="center">
                <div>Some text</div>
                <div id="right">
                    I want to be on the right side of the centered content but as tall as the taller between the body tag and the viewport.
                </div>
            </div>
        </body>
    </html>

CSS

body {
    padding: 0;
}
#stretched {
    background-color: #ddd;
    width: 100%;
}
.center {
    margin: 0 auto;
    position: relative;
    width: 300px;
}
#main {
    background-color: #bbb;
}
#right {
    background-color: #999;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}