JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar">
<div class="box">
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
</div>
<div class="box">
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
    <a href="">link</a>
</div>
</div>
<div class="content">
    <div class="crumbs clearfix">
        <a href="">crumb</a>
        <a href="">crumb</a>
        <a href="">crumb</a>
    </div>
    <div class="title">Title</div>
</div>

CSS

.clearfix:after, dl:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}

.clearfix, dl {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix, dl {
    display: block;
}

/* `SIDEBAR
-----------------------------------------*/

.sidebar {
    display: block;
    border-right: 1px solid #CCC;
    width: 250px;
    max-width: 250px;
    background: #FFF;
    vertical-align: top;
    box-shadow: 0 0 50px 10px rgba(0, 0, 0, .09);
    position: relative;
    float: left;
}

.sidebar a {
    display: block;
}


/* `CONTENT
-----------------------------------------*/

.content {
    display: block;
    background: #f6f5de;
    margin-left: 250px;
}

.crumbs {
    display: block;
    background: yellow;
    border: 1px solid #666;
    overflow:hidden; //added
}

.crumbs a {
    float: left;
    margin-left: 10px;;
}