JSFiddle - React, Tailwind, and code Playground

by Kai

HTML

<html>
<body>
<header class="header">
    <h1>Two-Column Layout</h1>
</header>
<div class="wrapper">
    <nav class="nav">
        <ul>
            <li>This</li>
            <li>is</li>
            <li>the</li>
            <li>nav</li>
        </ul>
    </nav>
    <div class="content">
        <p>Update the CSS so the nav functions as the left column with a width of 100px, and the content is a right column with a width of 700px, and both columns are contained in a box with a red border.</p>
    </div>
</div>
<footer class="footer"></footer>
</body>
</html>

CSS

.header h1{font-weight:bold;text-align:center;}
.nav{background-color:#666;color:#fff;width:100px;float:left;}
.nav ul li { display: inline; }
.content{700px; overflow:hidden;}