JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Exemplo 2</h1>
<div class="container clearfix">
    <div class="sidebar">
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>          
        </ul>
    </div>
    <div class="maincontent">
        <h3>Titulo 1</h3>
        <div class="box-container clearfix">
            <div class="box"></div>            
            <div class="box"></div>
            <div class="box"></div>
        </div>
        <!--Aqui a quebra parece estar corre porem a .maincontent não se expande para o espaço restante na tela-->
        <h3>Titulo 2</h3>        
    </div>
    
<div>

CSS

.container{
    height:auto;   
}
.sidebar{
    font-size:1.5em;
    width:200px;        
    border:1px #F00 solid;            
    height:auto;
    float:left;
}

.maincontent{    
    border:1px #00F solid;
    height:auto;   
    float:left;
}
.box-container{
    height:auto;   
}

.box{
    width:50px;
    height:50px;
    margin:1em;
    background:#CCC;
    float:left;
   
}

.clearfix:after {
content: "";
display: block;
clear: both;
}