JSFiddle - React, Tailwind, and code Playground

by jasongennaro

HTML

<div id="stretched">I span from the left viewport to the right viewport.</div>

<div id="main" class="center">
    
    <div id="left">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>

CSS

body {
    padding: 0;
}
#stretched {
    background-color: #ddd;
    width: 100%;
}
.center {
    margin: 0 auto;
    width: 300px;
    height:800px;
}
#main {
    background-color: #bbb;
}
#right {
    background-color: #999;
    width: 100px;
    display:inline-block;
    height:100%;
}
#left {
    width: 195px;
    display:inline-block;
    height:100%;
    vertical-align:top;
}