JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Exemplo 1</h1> 
<div class="container ">
    <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 da linha parece estar acompanhando o tamanho da .sidebar 
            quanto mais itens eu adiciono maior fica a quebra -->        
        <h3>Titulo 2</h3>        
    </div>
    
<div>

CSS

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

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

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

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